Как сделать плавающие внутренние div такой же высоты, как самый высокий div - PullRequest
Новая
       7

Как сделать плавающие внутренние div такой же высоты, как самый высокий div

9 голосов
/ 17 мая 2009

В следующем коде я хотел бы, чтобы div с 'y' соответствовал высоте div с 3 'x. 

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
    x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
    y
</div>

Следует отметить, что внутренние элементы плавающие.

Ответы [ 3 ]

12 голосов
/ 17 мая 2009

Было решение, которое я видел в A List Apart (я думаю), где вы даете двум внутренним столбцам огромный нижний отступ, но такое же огромное значение как отрицательное поле. Это все работает до тех пор, пока высота колонки не превышает 32000 пикселей, что является редкостью. Что-то вроде: 

.col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

... где "col" - это имя класса для любого столбца. Затем вы можете оформить отдельные столбцы так, как вам нравится, с помощью отдельного класса. 

<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

Другой вариант - использовать фоновое изображение на внешнем элементе div, включая ваши границы и т. Д. Этот подход, очевидно, означает, что немного сложнее изменить столбцы (ширину, цвета) после настройки.

5 голосов
/ 17 мая 2009

У вас есть три варианта.

  1. Сделайте внутренние делители такими же высокими, как и внешние. Это не так уж сложно;
  2. Поместите внутренние div внутри другого div и попробуйте использовать высоту и / или min-height 100%, чтобы сделать их такими же высокими, как и содержащий div, хотя я подозреваю, что это не сработает, так как содержащийся div, вероятно, растянется до высоты его содержащий div или страницу. Это могло бы стоить выстрел хотя; или, проще всего
  3. Используйте таблицы. Эта проблема тривиальна с таблицами. Это хороший пример чистых недостатков CSS .

Нет простого способа, чтобы два div делили «высоту». Такие хитрости, как высота 100%, имеют кросс-браузерные проблемы как с точки зрения атрибутов CSS, которые вы должны использовать, так и с границами, которые вы используете. Границы обычно дополняют любую высоту, которую вы используете.

Некоторые могут сказать, использовать display: table-cell, но поддержка этого довольно ограничена (в IE).

3 голосов
/ 17 мая 2009

Если вы не противник jQuery, вы можете использовать EqualHeight , он должен делать то, что вы хотите

...