Question

我希望类rect的DIV宽度与类box的基础DIV一样长。不应更改类box（至少是最小的更改）。此外，框不是按表格对齐的。我不关心容器的大小（黑色边框）。

此

enter image description here

应该是

enter image description here

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

您可以使用媒体查询，每次框折叠到下一行时指定rect的宽度。这涉及计算每个断点并向其发送媒体查询。

为了使计算更容易，您应该使用浮点数，以便元素之间的空白区域不会破坏您的布局。

以下演示需要调整，但它应该告诉你我在说什么：

DEMO （将结果窗口调整为宽度超过650像素，看它是否有效）

CSS示例：

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

Answer 2

以下是基于我上述评论的解决方案，它使用媒体查询：

由于盒子是固定宽度，如果屏幕宽度为[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边框+ 4px边距）。
min-width是屏幕的宽度，而不是容器的宽度。添加了2px以补偿黑色边框。
矩形的宽度从100开始，而不是106，因为它们已经有2px边框和4px边距。
@media规则的顺序很重要（min-widths ascending）。
＆＃34;空间＆＃34;的宽度（例如两个内联块之间的那个）取决于各种因素，包括字体系列和大小;我把盒子漂浮起来，使它们成为块元素，空间不计算在内。

Answer 3

这是一个解决方案，让我们进一步优化。

您可以像这样更改标记。（添加了.stretch div）

    ...
    <div class="box">BOX</div>
    <div class="box">BOX</div>
    <div class="stretch"></div>
</div>

和CSS，

.stretch {
    height: 0;
    font-size: 0;
    width: 100%;
    display: inline-block;
}

.container {
    width: 100%;
    border: 1px solid black;
    text-align: justify;
    padding: 2px;
}

* {
    margin: 2px 0;
}

这样，BOX es将对齐以占据父级的整个宽度。

但是，最后一行之间不会有相同的空格。

Answer 4

<style>
 .container { width: 50%; border: 1px solid black; }
.box-container
   {
    width: 640px;
   }
.box { display: inline-block;width:100px; height:100px; border: 1px solid red;;}

.rect { border: 1px solid green;
width: 630px;}

</style>
<div class="container">
    <div class="rect">The width must be as long as underlying boxes.</div>
   <div class="box-container">
    <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 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 class="box">BOX</div> 
    <div class="box">BOX</div>
    <div class="box">BOX</div>
</div> 
  </div>

Answer 5

IF和Only如果您只想使用JQuery来实现它，那么以下是您查询的代码。

<html>
<head>
<style>
* { 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; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
  resize();
  $(window).resize(function(){
    resize();   
  });
  function resize()
  {
    var max = 0, $element;
        $('.box').each(function()
        {
            if($(this).offset().left > max)
            {
                max = $(this).offset().left;
                $element = $(this);
            }
        });

        $(".rect").css("width",max+90);
  }
});
</script>
</head>
<body>
<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>
</body>
</html>

使顶部div与它下面的div一样宽

5 个答案: