Div标签和对齐问题

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

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

如何创建两个带有div标签的列？

来源

2011-01-26 JPJedi

能否请您包括您的CSS？ – kjy112 2011-01-26 18:33:10

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

float：left;

来源

2011-01-26 18:35:30 IrishChieftain

-1

第1步：删除div声明。
第2步：使用表格。
第3步：放松，知道它只是工作。

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

如果我没有问题，或者甚至希望列下降到下一行，因为宽度不可用，那么我会使用div。

你所描述的，即使是你使用的措辞，也正是表格的用意。表格有列。漂浮的东西不。

来源

2011-01-26 18:36:46 NotMe

诱惑+1这只是因为它很有趣。 – 2011-01-26 18:39:46

将两列浮动到左侧。这将导致两列显示在一起，按照文档从左到右的顺序排列。

来源

2011-01-26 18:36:51

将右列左浮动。确保您在浮动元素上指定宽度。

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

来源

2011-01-26 18:37:32

我也许有点晚了就这个问题，但如果你想使用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>

来源

2011-11-17 11:19:31

Div标签和对齐问题

回答

相关问题