Div标签和对齐问题

Question

我的Div标签有以下情况并浮动它们。 我有3个页面部分 - 页眉，正文，页脚。 我的问题是主（身体）部分。 在该部分中，我添加了两个div标签来创建主体部分的左右区域。 我把leftCol浮到左边。 但是rightCol比左边长，所以rightcol文本在leftCol div下面回来了，我不想要那样。 我基本上想要在该身体部分创建两个cols。 这是我在下面做的基本div结构。

<div class="header">
</div>
<div class="main">
   <div class="leftCol"></div>
   <div class="rightCol"></div>
</div>
<div class="footer">
</div>

如何在主要标记内创建带有div标记的两列？

Answer 1

两列的宽度可能超过“主”容器的宽度。 请记住，填充包含在每个的总宽度中。 另外，为两列设置以下float：

向左飘浮;

Answer 2

将两列浮动到左侧。 这将导致两列彼此相邻，按从左到右的文档顺序显示。

Answer 3

向右浮动右列。 确保在浮动元素上指定宽度。

如果您想让自己更容易，请考虑使用蓝图或其他CSS布局框架。

Answer 4

我可能在这个问题上有点迟了但是如果你想用div标签表行为你可以这样做：

<div class="header">
</div>
<div class="main" style="display:table-row">
   <div class="leftCol" style="display:table-cell"></div>
   <div class="rightCol" style="display:table-cell"></div>
</div>
<div class="footer">
</div>

Answer 5

第1步：删除div声明。
步骤2：使用表格。
第3步：放心，知道它只是有效。

我倾向于根据情况使用表和div的混合。 如果我必须有一个2列布局，我想确保不仅浏览器兼容性，而且各种屏幕分辨率不会插入布局：我使用表格。

如果我同意，甚至希望一列由于宽度不可用而下降到下一行，那么我将使用div。

您所描述的，甚至是您所使用的惯用语，都是表的确切用途。 表有列。 浮动的东西没有。