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

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

float：left;

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。

你所描述的，甚至你所使用的措辞，正是一张桌子的用途。表有列。浮动的东西没有。

Div标签和对齐问题

5 个答案: