Question

我是一个模板，我在HTML页面上有五个DIV元素。（徽标，顶级菜单，子菜单，内容，页脚）。

我希望用户能够为CMS中的每个DIV设置对齐方式：左，中，右。我用来转换为

的那些设置

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

每个DIV。但是，我希望用户能够为每一方指定一个真正的保证金。当然，这会使margin属性无法用于定位。

我不想要使用 float 进行定位，因为这会带来额外的布局麻烦。我必须使用overflow: auto包装器来包围DIV，依此类推。

我目前的想法是拥有两个嵌套的DIV 。外部的一个负责定位（margin：auto），而内部的一个负责设置用户指定的边距。

但我担心，当可变宽度发挥作用或内部填充时，这会给我带来额外的麻烦。

是否有比将块元素左，右或中心对齐更简单的方法？

IE7用于收听<div align=center>和由它包围的中心块元素。这样的东西（但有效和跨浏览器）正是我正在寻找的东西。

Answer 1

我将DIV置于＆lt; table＆gt;然后我用火把和干草叉躲避愤怒的CSS纯粹主义者群体。：）

Answer 2

您可以查看CSS Grids组件来处理您正在寻找的灵活性和跨浏览器兼容性。我使用YUI Grids CSS在CMS中实现了类似的功能。还有其他一些CSS网格解决方案，如the 960 Grid System和blueprint，但我没有任何个人经验。

这并不简单，但在处理跨浏览器兼容性时更容易。

Answer 3

如果您想在页面上添加页边距，请将所有其他div封装在用户可修改的页面中。

Answer 4

如果您不关心任何边框，可以选择填充？

Answer 5

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

应允许将您的五个div中的任何一个向左或向右浮动。编辑：和其他div应保持不变。

Answer 6

“然而，现在我希望用户成为能够为每个人指定一个真正的保证金一面也是。那当然是 margin属性无法使用定位“。

您可以使用带有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 
}

对齐DIV没有保证金或浮动

6 个答案: