Я пытаюсь выполнить какое-то нетипичное поведение div, поэтому я не уверен, возможно ли это.
У меня есть три div, которые расположены рядом друг с другом горизонтально: A, B и C (слева направо).Когда размер браузера изменяется или окно браузера пользователя слишком маленькое, я бы хотел, чтобы div B опускался ниже div A, а не на обычное поведение, когда div C опускается ниже div A.
Типичное поведениеэтот код демонстрирует:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
http://jsfiddle.net/P5xLx/
Когда я помещаю div A и B в одну ячейку таблицы, а div C в другую, я могу получить div B, чтобы опуститься ниже divA. Единственная проблема, связанная с этим, заключается в том, что левая ячейка таблицы, которая содержит два элемента div, не сворачивается на ширину двух элементов div, поэтому между элементами div A и B и элементом div все еще существует разрыв. Этот код показывает, чтоповедение:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div style="display: table-cell;">
<div class="box" style="height: 500px;">div c</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/cncgs/
Есть ли способ заставить левую ячейку таблицы принять ширину двух стеков div, или, возможно, есть какой-то другой способ сделать этокоторый не включает в себя стол вообще.По сути, мне просто нужно найти способ для div C сидеть рядом с A и B, когда B опускается ниже A. Я пытаюсь найти решение css и избегать использования решения javascript, которое, например, вычисляет ширину Aи B, и сравнивает его с шириной левой ячейки таблицы.
EDIT В приведенных выше примерах ширина составляет 200 пикселей, но в реальной реализации эти 200 пикселей являются переменной шириной.в зависимости от пользовательского контента.Я ищу решение, которое может работать со столбцами переменной ширины.