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

问题是因为内联块divs尊重空格。因此，你的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解决方案小提琴：http://jsfiddle.net/ond1ju6p/3/

Answer 2

您可以像这样使用展示table和table-cell：

.box-top {
    display: table;
    width: 100%;
}

.box-top-left,
.box-top-center,
.box-top-right {
    display: table-cell;
    width: 33%;
}

Answer 3

问题是，每侧添加1px的边框，因此框大于33.33％。（边框在设置宽度后由浏览器添加）。解决问题的最简单方法是使用calc(33.33% - 2px)作为宽度。

Answer 4

有两个问题悬而未决。

首先，内联块具有隐式间距，因此它们不会自动相互碰撞。这个额外的间距因浏览器和字体大小而异，所以为了摆脱它，你可以在容器元素上设置font-size: 0（在这种情况下，.box-top）。当然，您需要重置子元素的字体大小。

下一个问题是默认情况下宽度不包括填充或边框。所以你的盒子是33.33％，加上另外2px（两边的边框）。最简单的解决方法是在每个子框上box-sizing: border-box，然后在宽度计算中包含边框。这适用于大多数较新的浏览器，但如果您的目标浏览器不支持box-sizing（现在大部分时间，但请检查http://caniuse.com/#feat=css3-boxsizing），那么您需要修复它，以便您的框更窄到确保1px边框适合，这可能会变得一团糟。

Answer 5

我会添加“float：left;”和“box-sizing：border-box;” （没有引号）到.box-top-left，-middle和-right然后“clear：both;”到.box-bottom。如果这不起作用，我也会将这3个盒子的所有宽度都设为33.33％。

如何让3个div在另一个div上彼此对齐？

5 个答案: