html – 使顶部div与其下面的div一样宽

我想要DIV与类rect的宽度只要它的底层DIV与类框.类框不应更改(至少最小更改).此外,这些框不是由表对齐.我不在乎容器的大小(黑色边框).

这个

应该

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解决方案？

解决方法

这是一个基于我上面评论的解决方案,它使用媒体查询：

由于盒子是固定的宽度,如果屏幕是[x0,x1]像素宽,可以预先确定多少个盒子适合一行.您可以将此信息提供给CSS媒体查询,以创建几个规则,每个规则指定给定宽度范围的框宽.这是一个例子(使用excel生成)：

.rect { width: 100px; }
@media screen and (min-width:  214px) { .rect { width: 206px; } }
@media screen and (min-width:  320px) { .rect { width: 312px; } }
@media screen and (min-width:  426px) { .rect { width: 418px; } }
@media screen and (min-width:  532px) { .rect { width: 524px; } }
@media screen and (min-width:  638px) { .rect { width: 630px; } }
@media screen and (min-width:  744px) { .rect { width: 736px; } }
@media screen and (min-width:  850px) { .rect { width: 842px; } }
@media screen and (min-width:  956px) { .rect { width: 948px; } }

Code,Demo

笔记：

>我使用了106px(100px 2px border 4px margin)的倍数.> min-width是屏幕的宽度,而不是容器的宽度.添加了2px以补偿黑色边框.>矩形的宽度从100开始,而不是106,因为它们已经具有2px边框和4px边距.> @media规则的顺序重要(最小宽度升序).>“空格”的宽度(如两个内嵌块之间的宽度)取决于各种因素,包括字体系列和大小;我已经浮动了盒子,使它们成为块元素,空格并不算在内.

html – 使顶部div与其下面的div一样宽

解决方法

猜你在找的HTML相关文章