html - 如何让 3 个 div 在另一个 div 之上相互对齐？

Question

为了方便起见，我在此处为此创建了一个 jsFiddle:http://jsfiddle.net/ond1ju6p/

我试图让三个 div 在另一个 div 之上并排对齐。我以为给前两个宽度 33.33%第三个宽度为 33.34% ，它将等于 100% 宽度，但这不起作用。

我做错了什么？

这是HTML

<div class="box-top">
    <div class="box-top-left">Pig One</div>
    <div class="box-top-center">Pig Two</div>
    <div class="box-top-right">Pig Three</div>
</div>

<div class="box-bottom">Three little piggies had an awesome day.</div>

和 CSS

.box-top-left {
    background-color: #FFF;
    padding: 0px;
    border-width: 1px 1px 1px 0px;
    border: 1px solid #C4C4C4;
    border-radius: 5px 5px 0px 0px;
    display: inline-block;
    width: 33.33%;
}
.box-top-center {
    background-color: #CCC;
    padding: 0px;
    border-width: 1px 1px 1px 0px;
    border: 1px solid #C4C4C4;
    border-radius: 5px 5px 0px 0px;
    display: inline-block;
    width: 33.33%;
}
.box-top-right {
    background-color: #CCC;
    padding: 0px;
    border-width: 1px 1px 1px 0px;
    border: 1px solid #C4C4C4;
    border-radius: 5px 5px 0px 0px;
    display: inline-block;
    width: 33.34%;
}

.box-bottom {
    background-color: #FFF;
    padding: 10px 30px;
    border-width:0px 1px 1px 1px;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #C4C4C4;
}

Answer 1

问题是因为内联 block div 尊重空白。因此，您的 div 与返回键之间有微小的间隙。

改变:

<div class="box-top">
    <div class="box-top-left">Pig One</div>
    <div class="box-top-center">Pig Two</div>
    <div class="box-top-right">Pig Three</div>
</div>

为此:

<div class="box-top">
    <div class="box-top-left">Pig One</div><div class="box-top-center">Pig Two</div><div class="box-top-right">Pig Three</div>
</div>

然后将以下 css 规则添加到您的 div 中:

box-sizing: border-box;

它对我有用。

Border-box使边框包含在宽度大小中。它具有良好的跨浏览器支持。

js fiddle :http://jsfiddle.net/ond1ju6p/2/

编辑:您也可以尝试添加 display:flex给父级而不是删除空格。

.box-top {
    display:flex;
}
.box-top > div {
    box-sizing: border-box;
}

Flex 解决方案 fiddle :http://jsfiddle.net/ond1ju6p/3/