Несколько центрированных плавающих divs в жидком макете

У меня есть идея для макета, который я бы хотел использовать, но я не могу заставить его работать правильно. Я надеюсь, что кто-то здесь сможет помочь, поскольку я потратил часы на поиск.Несколько центрированных плавающих divs в жидком макете

Макет такой.

В одной обертке находятся 6 дочерних дивизий. Эти дочерние div должны быть сосредоточены на ВСЕ раз независимо от размера обертки div.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; float: left; background: #fff; } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

Проблема заключается в том, когда браузер изменяет размер меньше и окно стучится на линии ниже коробки будут зажженным налево, в то время как я хочу, чтобы они были всегда в центре. Возможно ли использование чистого css или мне нужно использовать некоторый jquery?

источник

2010-10-12 Craig Ward

Они никогда не центрируется для меня, используя код? –

Возможно, самым простым решением является удаление стиля float: left из полей и изменение свойства отображения на встроенный блок. Затем все, что вам нужно сделать, это text-align: center на обертке.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center } 
.box { width: 280px; padding: 10px; margin:10px; height: 260px; border: 0px; background: #fff; display:inline-block } 
</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body>

Вы можете проверить код здесь: http://jsbin.com/uqamu4/edit

источник

2010-10-12 10:03:58

Наверное, лучшее решение, но не будет работать в IE6 и 7 –

Привет, Виктор, Проблема с этим - коробки, которые не обертывают. Я хочу, чтобы этот дисплей работал на любом устройстве. Например, обычный ноутбук, вероятно, будет показывать 3 коробки бок о бок, но iphone просто отобразит один поверх другого. Но если кто-то меняет видовое окно, чтобы он ударил ящик на следующую строку, он все равно должен был центрировать все поля. –

Собственно, проигнорируйте меня. Похоже, что он работает, но показывает только 2 бок о бок в тот момент, который я могу изменить. Cheers :) –

Это не будет работать в IE 8 или меньше, не знаю о 9, но с вашей помощью max-width и min-width, которые не работают и там Я все равно отправлю его.

<html> 
<head> 
<title>Testing</title> 
<style> 
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0; } 
#wrapper { max-width: 960px; min-width: 320px; background: #444; margin: 0 auto; text-align:center; } 
.box { width: 280px; padding: 10px; margin:8px; height: 260px; border: 0px; background: #fff; display:inline-block;} 

</style> 
</head> 
<body> 

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <br class="clear" /> 
</div> 

</body> 
</html>

источник

2010-10-12 10:05:02

Будет работать в IE8, но не 7 –

не работал в моем IE8 ... –

Вы можете использовать text-align: center в обертке и display: inline-block для коробок, чтобы заставить их вести себя как обычные текстовые элементы, которые не сосредоточенных ни на что.

Оговорка: Не работает в IE6 и IE 7. Работает в Chrome и FF

JSFiddle here.

источник

2010-10-12 10:05:45

Решение, которое работало для меня:

<style> 
    body { 
     /* To center the list */ 
     text-align: center; 
    } 

    #wrapper { 
     /* To reset 'text-align' to the default */ 
     text-align: left; 

     display: inline; 
    } 

    .box { 
     display: inline-block; 
    } 
</style>

источник

2014-07-13 18:50:49 Blackbird

Несколько центрированных плавающих divs в жидком макете

ответ

Смежные вопросы