Question

我的情况类似于以下

<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>
....

我意识到如果我只有一个div中的div =“col1”的div并且class =“col2”的div都在另一个div中，这会更容易但是有什么方法我可以在2中显示列没有这样做？提前谢谢。

Answer 1

您可以尝试这样的事情：

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

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

Answer 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}

Answer 3

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

似乎工作，但显然带来了自己的一系列问题。如果不在整个布局的框架内工作，这种问题有点难以回答。

Answer 4

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

p.s：语法荧光笔恨我:) ＆lt; style type =“text / css”＆gt;

.col1，.col2 { display：inline-block; } .col1 { 向左飘浮; 背景：＃ff0; 清楚：左; 宽度：200px; } .col2 { 漂浮：对; 背景：＃f0f; 明确：对; 宽度：200px; 位置：相对; 顶部：-300px; 右：0; } ＆LT; /风格＆GT;

来自2组div的2列

4 个答案: