Выравнивание DIV без полей или с плавающей точкой

Question

Я шаблон, у меня есть пять элементов DIV друг под другом на странице HTML. (Логотип, верхнее меню, подменю, контент, нижний колонтитул).

Я хочу, чтобы пользователь мог устанавливать выравнивание для каждого DIV в CMS: слева, по центру, справа. Те настройки, которые я использовал для перевода на

margin-left: auto; margin-right: 0px; // right
margin-right: auto; margin-left: 0px; //left 
margin-left: auto; margin-right: auto; // center

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

Я не хочу использовать float для позиционирования, так как это принесет дополнительные проблемы с макетом. Я должен был бы окружить DIV с overflow: auto обертками и так далее.

Моя текущая идея - иметь двух вложенных DIV . Внешний заботится о позиционировании (margin: auto), а внутренний устанавливает пользовательские поля.

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

Есть ли более простой способ, чем выровнять элемент блока по левому, правому краю или по центру?

IE7 используется для прослушивания <div align=center> и элементов центрального блока, окруженных им. Нечто подобное (но действительное и кросс-браузерное) будет именно тем, что я ищу.

Answer 1

Я позиционирую DIV s в элементах <<code>table>, а затем прячусь от злой толпы CSS-пуристов с факелами и вилами. :)

Answer 2

Вы можете использовать компонент CSS Grids для обеспечения гибкости и кросс-браузерной совместимости, которые вы ищете. Однажды я реализовал аналогичную функцию в CMS, используя YUI Grids CSS . Существует несколько других решений CSS Grids, таких как 960 Grid System и blueprint , но у меня нет личного опыта с ними.

Это не совсем просто, но проще, когда речь идет о кросс-браузерной совместимости.

Answer 3

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

Вы можете использовать динамическую таблицу стилей с php. Вы можете передать указанные пользователем переменные в таблицу стилей ... примерно так:

<?php

header("Content-type: text/css");

$left = $_POST['left'];
$right = $_POST['right'];

?>

div#right {
     margin-left: auto; 
     margin-right: <? echo $right ?>px; // right
}

div#left {
     margin-right: auto; 
     margin-left: <? echo $left ?>px; //left 
}

Answer 4

#topmenu, #submenu, #content, #footer {
  clear: both;
}

должно позволять плавать любому из ваших пяти div влево или вправо. edit: и другие div должны остаться на месте.

Answer 5

Если вас не волнует какая-либо граница, возможно, подойдет отступ?

Answer 6

Если вы хотите добавить поле на странице , инкапсулируйте все остальные ваши div в редактируемом пользователем.