来自 2 组 div 的 2 列答案

【问题标题】：2 columns from 2 groups of div's来自 2 组 div 的 2 列
【发布时间】：2010-02-10 22:39:59
【问题描述】：

我有类似下面的情况

<div class="col1">
  <h2>title</h2>
  <div><ul><li>Content</li><li>Another Item</li></ul></div>
</div>
<div class="col1">
  <h2>Another title</h2>
  <div><ul><li>More Content</li></ul></div>
</div>
<div class="col1">
  <h2>...</h2>
  <div><ul><li>More Content</li><li>Still more</li></ul></div>
</div>
....
<div class="col2">
  <h2>title</h2>
  <div><ul><li>Content</li></ul></div>
</div>
<div class="col2">
  <h2>Another title</h2>
  <div><ul><li>More Content</li><li>And More</li><li>...And More</li></ul></div>
</div>
<div class="col2">
  <h2>...</h2>
  <div><ul><li>More Content</li><li>Still more</li></ul></div>
</div>
....

我意识到如果我将 class="col1" 的 div 全部放在一个 div 中，并将 class="col2" 的 div 全部放在另一个 div 中，这会容易得多，但是有什么方法可以让我在 2 中显示列而不这样做？提前致谢。

【问题讨论】：

你为什么不想将这些插入到两个容器 div 中？
如果绝对有必要，我可以这样做，但是这段代码是从另一个控件生成的，让该控件输出额外的
标签所涉及的工作量实际上非常重要。

标签： html css

【解决方案1】：

你可以试试这样的：

<style type="text/css">
  .col1 {
    display:block;
    float: left;
    background: #ff0;
    clear: left;
    width: 200px;
  }
</style>

设置背景只是为了查看正在发生的事情，并且可以调整宽度。

【讨论】：

这会将第一个“col2”div 推到最后一个“col1”div 的右侧，但不会将右列推到顶部。有什么建议吗？
嘿，Ben，在我的环境 (ff3) 和我使用的示例代码中，col2s 与 col1s 右对齐。您在 col2 上有任何浮动活动吗？如果是，请尝试删除浮动；）
我能够得到它（部分工作）但现在如果左列最终比右列短，则右侧的剩余项目将被推回左列。
是的，但恐怕除非您不将 col2s 包装在容器中，否则您将无法避免这种情况。或者，您可以尝试将它们向右浮动，如上所述，并通过在所有列周围放置一个包装器将它们对齐。我会在一分钟内用一个例子更新我的帖子..

【解决方案2】：

<div class="col1 left" >
  <h2>title</h2>
  <div><ul><li>Content</li><li>Another Item</li></ul></div>
</div>

<div class="col2 right" >
  <h2>title</h2>
  <div><ul><li>Content</li><li>Another Item</li></ul></div>
</div>

<div class="clear"></div>

其中 .left {float:left} .right{float:right}

所以对于每个“行”，y 将有一个左侧和一个右侧。

必须为开始的每个“行”清除浮动

.clear {clear:both}

【讨论】：

【解决方案3】：

.col1 {
clear:left;
float:left;
width:200px;
}

似乎可行，但显然会带来一系列问题。这种问题，如果不放在整个布局的框架内，有点难以回答。

【讨论】：

【解决方案4】：

将其粘贴到您的 head 标签中。

p.s: 语法高亮讨厌我 :)

.col1, .col2 { 显示：内联块； } .col1 { 向左飘浮; 背景：#ff0；清除：左；宽度：200px； } .col2 { 浮动：对；背景：#f0f；明确：正确；宽度：200px；位置：相对；顶部：-300px；对：0； }

【讨论】：

这似乎有效。顶部在哪里：-300px；从哪里来？
不幸的是，-300px 比较麻烦，这需要使用 javascript 导出，本质上它是从父级顶部偏移的高度。您的顶级容器需要有 position: relative; （在本例中为 body 标签）。我已经手动摆弄给你一个想法。