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

为了更简单，我在这里创建了一个JSFIDLE：

我试图让三个div在另一个div的顶部彼此对齐。我认为，如果前两个div的宽度为

33.33%

，第三个div的宽度为

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>

---

您可以像这样使用显示

表格

和

表格单元格

：

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

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

---

您可以像这样使用显示

表格

和

表格单元格

：

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

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

---

问题是，在每一侧添加1px的边框，因此框会变得大于33.33%。（边框在设置宽度后由浏览器添加）。最简单的解决方法是使用

calc（33.33%-2px）

作为宽度。

问题是，每侧添加1px边框，因此框变大超过33.33%。（边框在设置宽度后由浏览器添加）。最简单的解决方法是使用

calc（33.33%-2px）

作为宽度。

问题在于内联块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>

这对我很有用

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

js小提琴：

编辑：您也可以尝试添加到父级，而不是删除空白

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

---

Flex solution fiddle:

问题在于内联块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>

这对我很有用

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

js小提琴：

编辑：您也可以尝试添加到父级，而不是删除空白

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

---

Flex solution fiddle:

有两个问题将此挂起

首先，内联块具有隐式间距，因此它们不会自动相互碰撞。额外的间距随浏览器和字体大小而变化，因此要消除它，可以在容器元素上设置

font-size:0

（在本例中为

.box-top

）。当然，然后需要重置子元素的字体大小

---

下一个问题是默认情况下宽度不包括填充或边框。所以你的盒子是33.33%，再加上2个（两边的边界）。最简单的解决方法是在每个子框上设置框大小：边框框，然后将边框包含在宽度计算中。这在大多数较新的浏览器上都适用，但如果您的目标浏览器不支持框大小调整（大多数现在支持，但请选中），那么您需要修复它，使框更窄，以确保1px边框适合，这可能会变得一团糟。

有两个问题将此问题挂起

首先，内联块具有隐式间距，因此它们不会自动相互碰撞。额外的间距随浏览器和字体大小而变化，因此要消除它，可以在容器元素上设置

font-size:0

（在本例中为

.box-top

）。当然，然后需要重置子元素的字体大小

---

下一个问题是默认情况下宽度不包括填充或边框。所以你的盒子是33.33%，再加上2个（两边的边界）。最简单的解决方法是在每个子框上设置框大小：边框框，然后将边框包含在宽度计算中。这在大多数较新的浏览器上都适用，但如果您的目标浏览器不支持框大小调整（大多数现在支持，但选中），那么您需要修复它，使框更窄，以确保1px边框适合，这可能会变得一团糟。

我会添加“float:left；”和“box size:border box；”（不带引号）到.box左上方、-中间和-右侧，然后“清除：两者”；到.box底部。如果这不起作用，我也会将这3个框的所有宽度设置为33.33%。

我会将“浮动：左侧”和“框大小：边框框；”（不带引号）添加到.box top left、-middle和-right，然后将“clear:bother；”添加到.box bottom。如果这不起作用，我也会将这3个盒子的所有宽度设为33.33%。

你有1px的边框，在使用宽度时必须考虑到这一点：33%。如果删除此边框，则边框为1px，在使用宽度时必须考虑此值：33%。如果删除此边框，它将正常工作