html - 如何使3个div在另一个div上彼此对齐？

为了简化，我在这里为此创建了一个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;
}

最佳答案

问题是因为内联块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小提琴：http://jsfiddle.net/ond1ju6p/2/

编辑：您也可以尝试将display:flex添加到父对象，而不是删除空格。

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

Flex解​​决方案提琴：http://jsfiddle.net/ond1ju6p/3/

关于html - 如何使3个div在另一个div上彼此对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29651081/