Shrink-wrap / Shrink-to-fit, чтобы соответствовать div переформатированным плавающим div в css

Question

http://jsfiddle.net/zEcn3/12/

Я пытаюсь получить div content, который изменяется до количества div с, которые помещаются в линию.Таким образом, пример работает нормально, когда окно больше, чем все item div s, вместе взятые, поэтому они все в ряд, но когда размер окна уменьшается, так что один из item s переформатируется на следующийстрока, ширина content div составляет 100% вместо термоусадочной упаковки.

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

HTML:

<div class="wrapper">
    <div class="content">
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
    </div>
</div>

CSS:

.item {
    float: left;
    width: 70px;
    border: 1px solid black;
}

.content {
    display: inline-block;
    border: 1px solid black;

}
.content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Answer 1

Друг понял это для меня, ответ - использовать медиа-запросы.

@media (max-width: 1080px) {
    #main {
        max-width: 640px;
    }
}

Поэтому я устанавливаю интервалы ширины каждого элемента div, поэтому, когда окно просмотра меньше определенного числа, оно устанавливает ширину контейнера на следующий уровень вниз.

Answer 2

Я не совсем уверен, пытались ли вы удалить 100% ширину контейнера или просто уменьшали контейнер вместе с содержимым, в зависимости от размера экрана.

ПроблемаНа мой взгляд, когда я сжимаю экран, последний «Hello» с правой стороны опускается до следующего ряда.

Итак, я установил 100% ширину для оболочки.Затем я просто удалил фиксированную ширину из элементов и изменил ее на% widths.В этом случае я взял количество ящиков и разделил их на 100%, что составляло 20% каждый (но с 1px границей я уменьшил до 19% каждый).Также я добавил display:block; margin-left:auto; margin-right:auto; к id="content".

Вот ссылка на JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/

Answer 3

Я нашел ответ здесь: http://haslayout.net/css-tuts/CSS-Shrink-Wrap

Это в основном сводится к использованию display: inline-block; для элемента блока, который вы хотите сжать, чтобы соответствовать его содержимому.

Answer 4

Попробуйте использовать margin:auto для container <div> и установить fixed position.