Сделайте верхний div таким же широким, как div ниже него

Ответ 1

Вот решение, основанное на моем комментарии выше, оно использует медиа-запросы:

Так как ящики имеют фиксированную ширину, можно заранее определить, сколько ящиков соответствует одной строке, если экран имеет ширину [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; } }

Код, Демо

Примечания:

• Я использовал кратные 106px (100px + 2px border + 4px margin).
• min-width - ширина экрана, а не ширина контейнера. 2px добавлены для компенсации черной границы.
• Ширины прямоугольника начинаются с 100, а не с 106, так как они уже имеют границу 2px и 4px.
• Порядок правил @media имеет значение (минимальная ширина увеличивается).
• Ширина "пространства" (например, между двумя встроенными блоками) зависит от различных факторов, включая семейство шрифтов и размер; Я размещал ящики так, чтобы они становились блочными элементами и пробелы не учитывались.

Ответ 2

Вы можете использовать медиа-запросы, чтобы указать ширину прямоугольника каждый раз, когда поле сворачивается в следующую строку. Это включает в себя вычисление каждой точки прерывания и приближение медиа-запроса к ней.

Чтобы упростить вычисления, вы должны использовать поплавки, чтобы белое пространство между элементами не разрушало ваш макет.

Следующая демо нуждается в настройке, но она должна показать вам, о чем я говорю:

DEMO (измените размер окна результатов выше 650px в ширину, чтобы увидеть его работу)

Пример CSS:

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

Ответ 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 будет выравниваться, чтобы занять полную ширину родителя.

Однако последняя строка не будет иметь промежутка между ними.

Ответ 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>

Ответ 5

IF и только если вы хотите сделать это просто с помощью 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>