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

Question

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

я хотел бы, чтобы родительский 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.

Есть идеи?

15

css width parent

задан skaffman 11 December 2010 в 21:20

3 ответа

score 3 · Answer 1

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

3

ответ дан 1 December 2019 в 02:10

score 28 · Answer 2

Используйте display: inline-block; в родительском

, и он будет работать должным образом

28

ответ дан 1 December 2019 в 02:10

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

Добавьте clear INSIDE родителя внизу, и сделайте родителя overflow: hidden.

Вот измененный код:

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

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

1

ответ дан 1 December 2019 в 02:10

Другие вопросы по тегам:

css width parent

Похожие вопросы:

score 1 · Answer 3

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

Добавьте clear INSIDE родителя внизу, и сделайте родителя overflow: hidden.

Вот измененный код:

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

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