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

Я хотел бы, чтобы parent-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.

Любые идеи?

Ответы

Ответ 1

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

Ответ 2

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

Ответ 3

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

Добавить ясный INSIDE родительский снизу и сделать родительский переполнение: скрытым.

Здесь измененный код:

.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, но не проверяется в других браузерах.

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

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

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

Ответ 7

Сделать родительское положение относительным и дочерним по отношению к абсолютному