元素与其后的另一个居中元素对齐

Question

我想知道如何在下面的模型中实现样式化？

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

Answer 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()。