Выровнять плавающие элементы по горизонтали в CSS

У меня есть неограниченное/несвязанное количество тегов DIV, которые плавают влево.Выровнять плавающие элементы по горизонтали в CSS
При изменении размера браузера теги DIV переносятся на следующую строку.
Поскольку теги DIV обертываются на основании того, имеют ли они достаточное расстояние в правой части экрана, когда они завертываются, он оставляет большое пространство в правой части экрана.
Так что если DIV был 32x32, пространство с 32x32 будет оставлено в правой части экрана.

Я хотел бы родительский DIV центровки содержимого в этой ситуации, так что если не было, например, 32px пространство на правой стороне в результате обертки, он будет регулировать дочерние контенты имеют 16px с левой стороны и 16px с правой стороны.

Например, без содержания центрированы, экран будет выглядеть следующим образом:.

[DIV] [DIV] [DIV] [DIV] .. GAP |

[DIV] < -Оборудованный ................. |

Я хотел бы поставить эти DIVs внутри родителя, так что, когда DIV был завернут, содержимое будет выглядеть следующим образом:

..... [DIV] [DIV] [DIV] [DIV] ..... | < - Центрированный, но все еще плавающий влево.

..... [DIV] .............................. | < - Родитель центрирован, но DIV все еще плавает влево.

Обертывание по-прежнему разрешено, но по мере того как браузер сжимается или растет горизонтально, родительский DIV автоматически корректирует содержимое дочерних DIVs в центр.

Как это сделать?

источник

2010-09-18 George Johnston

Я не вижу разницы между «изображением» 1 и 3. Пожалуйста, объясните это. – cypher

Можете ли вы опубликовать часть своей разметки? – wsanville

Как вы описали, вы не можете этого сделать. Вы могли бы установить все отображаемые divs: inline-block вместо float left, а затем поместить их все в большой div div с центром выравнивания текста. Это приведет к тому, что div, который скачет вниз по центру, а не выравнивается влево.

В качестве альтернативы вы можете установить обертку div, у которой была установлена ее ширина в процентах от страницы, а также минимальная ширина пикселя, а затем была установлена маржа 0 auto. Что-то вроде:

div.wrapper {width:90%; min-width:800px; margin: 0 auto;}

Я подозреваю, что это будет делать то, о чем вы думаете, но я не проверял его. Надеюсь, это искромет некоторые идеи!

источник

2010-09-18 21:05:26 Andrew

Это не может быть именно то, что вы просили, но я думаю, что она отвечает эстетическим требованиям:

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<style> 
    #wrapper { 
     margin: 0 auto; 
     border: 1px solid gray; 
     text-align: justify; 
    } 

    .me { 
     display: inline-block; 
     padding: 1em; 
     border: 1px solid blue; 
    } 
</style> 
</head> 
<body> 
    <div id = "wrapper"> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p> 
       <p>Or two.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
      <div class="me"><p>One line of stuff in a div.</p></div> 
    </div> 
</body> 
</html>

источник

2010-09-19 00:39:48

Выровнять плавающие элементы по горизонтали в CSS

ответ

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