html - 使顶部 div 与其下方的 div 一样宽

Question

看这个:http://jsfiddle.net/90d7144p/

我希望 rect 类的 DIV 的宽度与其底层 box 类的 DIV 一样长。类 box 不应更改(至少更改最少)。此外，这些框未按表格对齐。我不关心容器的大小(黑色边框)。

这个

应该是

CSS:

* { margin: 2px; }

.container { width: 100%; border: 1px solid black; }

.box { display: inline-block; width:100px; height:100px; border: 1px solid red; }

.rect { border: 1px solid green; }

HTML:

<div class="container">
    <div class="rect">The width must be as long as underlying boxes.</div>
    <div class="box">BOX</div> <div class="box">BOX</div>
    <div class="box">BOX</div> <div class="box">BOX</div>
    <div class="box">BOX</div> <div class="box">BOX</div>
    <div class="box">BOX</div> <div class="box">BOX</div>
    <div class="box">BOX</div>
</div>

是否有任何基于 CSS 或 HTML 的解决方案？

Answer 1

您可以使用媒体查询来指定矩形每次折叠到下一行时的宽度。这涉及计算每个断点并对其应用媒体查询。

为了简化计算，您应该使用 float ，这样元素之间的空白就不会破坏您的布局。

以下演示需要调整，但它应该向您展示我在说什么:

DEMO (将结果窗口的大小调整到 650 像素以上以查看效果)

CSS 示例:

@media screen and (min-width: 742px) and (max-width: 847px){
    .rect {
        width: 736px;
    }
}