div标签和对齐问题答案

【问题标题】：Div tags and alignment issuediv标签和对齐问题
【发布时间】：2023-03-25 12:25:01
【问题描述】：

我的 Div 标签和浮动它们有以下情况。我有页面的 3 个部分 - 页眉、正文、页脚。我的问题是主要（正文）部分。在该部分中，我添加了两个 div 标签来创建正文部分的左右区域。我将 leftCol 向左浮动。但是 rightCol 比 left 长，所以 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 标签的列？

【问题讨论】：

能否请您包含您的css？

标签： asp.net css visual-studio-2008 html

【解决方案1】：

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

浮动：左；

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

第 1 步：删除 div 声明。
第 2 步：使用表格。
第 3 步：放松一下，知道它确实有效。

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

如果我可以接受，甚至希望有一列因为宽度不可用而下降到下一行，那么我将使用 div。

您所描述的，甚至是您使用的措辞，正是表格的用途。表有列。浮动的东西不会。

【讨论】：

想 +1 只是因为它很有趣。