Shrink-wrap/Shrink-to-fit div для reflowed floated divs в css

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

Я пытаюсь получить div content, который изменяет размер до числа div, которое вписывается в строку. Таким образом, пример отлично работает, когда окно больше, чем все item div, объединенные, поэтому они все подряд, но когда размер окна меньше, поэтому один из item переплавляется в следующую строку, ширина 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;
}

Ответ 1

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

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

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

Ответ 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/

Ответ 3

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

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

Ответ 4

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