Как сделать так, чтобы ящик увеличивал свой размер в зависимости от его содержимого? - PullRequest
Новая
       0

Как сделать так, чтобы ящик увеличивал свой размер в зависимости от его содержимого?

1 голос
/ 10 сентября 2011

Рассмотрим страницу (полный источник ниже), где у вас есть:

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

Это выглядит следующим образом, и, как и ожидалось, div "содержит" изображение:

div contains image

Однако, если вы сделаете окно браузера меньше, вы попадете в точку, где оно недостаточно велико для изображения: часть изображения не будет видна, и браузер должен добавить полосу прокрутки.Все идет нормально.Тем не менее, размер div по-прежнему основан на ширине области просмотра, и, следовательно, изображение выходит за пределы div:

div narrower than image

Вместо этого, я бы хотел, чтобы div всегда был "вокруг », и становятся шире, если содержащая коробка не может быть сужена.Интересно, что это именно то, что происходит в режиме Quirks, здесь, как показано в IE8:

quirks mode

Как получить, добавив CSS, точно такой же результат, который я получаю в Quirks сIE8, а в режиме стандартов?И для справки, вот полный источник этого примера: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            /* Styling */
            div     { background-color: #999 }
            body    { font-family: sans-serif }
            div     { margin: .5em 1em; padding: .5em }
        </style>
    </head>
    <body>
        <div>
            <img src="http://placekitten.com/g/400/100"/>
        </div>
    </body>
</html>

Ответы [ 3 ]

1 голос
/ 11 сентября 2011

Попробуйте это:

CSS

Old answer, Truncated

HTML

Old answer, Truncated

Демо

EDIT:

После долгих попыток вот что я могу придумать:

CSS 

.table {
    display:table;
    background-color: #999;
    width:90%;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    margin: .5em 1em;
    padding: .5em
}

HTML 

<div class="table">    
    <div class="row">
        <div class="cell">
            <img src="http://placekitten.com/g/400/100"/>
        </div>
    </div>
</div>

Сопровождающая скрипка: http://fiddle.jshell.net/andresilich/Q4VnF/

0 голосов
/ 10 сентября 2011

С дисплеем : встроенный блок также работает.

0 голосов
/ 10 сентября 2011

Я бы пошел на div { display: table-cell; }

РЕДАКТИРОВАТЬ: Я не думаю, что это может быть сделано с разметкой, как указано. Вы можете приблизиться, используя div { display: table; width: 100%; }, но вам не нравится иметь запас. Если вы используете два элемента блока, вы можете поместить { display: table; width: 100%; } на внешний элемент и { display: table-cell; }, а отступ, отступ и фон - на внутренний элемент.

...