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

146
18

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;
}

спросил(а) 2011-10-02T08:04:00+04:00 8 лет, 4 месяца назад
1
Решение
60

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


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

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

ответил(а) 2011-10-03T09:48:00+04:00 8 лет, 4 месяца назад
49

Я не совсем уверен, пытались ли вы удалить 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/

ответил(а) 2011-11-06T22:02:00+04:00 8 лет, 3 месяца назад
37

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


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

ответил(а) 2013-08-21T23:25:00+04:00 6 лет, 6 месяцев назад
-5

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

ответил(а) 2011-10-03T08:13:00+04:00 8 лет, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема