元素与它之后的另一个居中元素对齐答案

【问题标题】：Element aligned to another centered element that's after it元素与它之后的另一个居中元素对齐
【发布时间】：2014-11-30 02:48:32
【问题描述】：

我想知道如何实现如下样机中的样式？

红色框相对于父元素居中。蓝框占据其父框的左边缘和蓝框的右边缘之间的所有空间。空白只是父母背景的一部分。红框是 300px 宽。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用 CSS 表格实现此目的：

Example Here

只需将父元素的display 设置为table，并添加table-layout: fixed。将子元素的display 设置为table-cell，并赋予它们100% 的宽度。这样做时，它们将流畅地填充剩余区域。

<div class="parent">
    <div class="child"></div>
    <div class="child fixed"></div>
    <div class="child"></div>
</div>

.parent {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.parent > .child {
    display: table-cell;
    height: 100px;
    width: 100%;
}
.parent > .child.fixed {
    width: 300px;
}

或者，如果你不想使用 CSS 表格，你也可以使用calc() 来设置元素的宽度。

在这种情况下width: calc((100% - 300px) / 2) 可以工作。

Example Here

.parent > .child {
    height: 100px;
    width: calc((100% - 300px) / 2);
    display: inline-block;
    vertical-align: top;
}
.parent > .child.fixed {
    width: 300px;
}

只需考虑browser support 为calc()。

【讨论】：

@John ..为什么不呢？它的存在是有原因的。
这是一个 hack，它表明对 CSS 的工作原理缺乏了解。作者甚至破解了几件事情（vertical-alignment 和 height: 100%; 在大多数情况下都不能正常工作）但是一直到 IE4/Opera 4 的工作是 float 这是人们应该使用的，不是display 和table 黑客。
换一种说法：如果你打算花时间帮助人们教他们以正确的方式去做，而不是任何方式。我建立自己的平台有很多原因，但可以总结为一个：人们不会正确编写代码，尤其是当做正确的事情非常容易时。
这是完全可以接受的，@John。您的批评超出了个人喜好。下车。
我想知道是否可以将空子替换为 .parent > .child.fixed:after 之类的东西？我尝试使用 display: table-cell 和 content: "" 设置它的样式，但它没有用。编辑：固定。我只需要设置 parent:after 的样式，它就可以完美地工作。