CSS: Parent-Div не растет со своими детьми (по горизонтали) - PullRequest
Новая
       36

CSS: Parent-Div не растет со своими детьми (по горизонтали)

14 голосов
/ 30 марта 2010

Я бы хотел, чтобы div-родитель (красный) рос с зеленым div-элементом Теперь он просто останавливается у окна просмотра. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
 * {
  font-family: verdana;
  margin: 0px;
  padding: 0px;
 }
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>

Я не хочу использовать display: table; так как это не очень хорошо работает в IE.

Есть идеи?

Ответы [ 7 ]

27 голосов
/ 30 марта 2010

Используйте display: inline-block; на родительском <div>, и он будет работать как положено

3 голосов
/ 30 марта 2010

Сделать родительский div float: left; и он будет расширен по желанию.

1 голос
/ 01 июня 2010

Я знаю, что опоздал, но вот что я делаю, чтобы решить проблему:

Добавьте очистку ВНУТРИ родителя внизу и сделайте переполнение родителя скрытым.

Вот модифицированный код: 

.clear{
    clear: both;
    /* make sure there is no height set to it */
    line-height: 0;
    height: 0;
    font-size: 0em;
}

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
 <div class="clear">/div>
</div>

Работает в FF3 и IE7, но не тестируется в других браузерах.

Надеюсь, по крайней мере, помочь вам с вашей проблемой.

0 голосов
/ 10 октября 2013

Сделать родительскую позицию относительной, а дочернюю - абсолютной

0 голосов
/ 14 мая 2012

Здесь слишком много сложных советов. Вот совет: вместо того, чтобы возиться с ячейками таблицы, очистить и плавать, просто убедитесь, что у ребенка есть граница, которая эквивалентна заполнению, которое вы искали для родителя. Границы всегда рисуются снаружи, поэтому он будет делать то, что вы хотите.

Это должно работать ... 

<div style="margin: 30px; background: red;">
 <div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>

... во всех браузерах без проблем. НТН.

0 голосов
/ 06 марта 2011

Использовать дисплей: таблица; на родительском див. Или вы можете поместить родительский div в ячейку таблицы.

0 голосов
/ 13 ноября 2010

См. это решение с quirksmode.org. Это довольно просто, просто примените этот класс к контейнеру / родительскому div: 

div.container {
    overflow: hidden;
    width: 100%;
}
...