Question

我一直在努力让CSS漂浮起来（在我脑海中）。

请注意以下示例：

<style type="text/css">
    div.container {
        width:500px;
    }
    div.left {
        float:left;
        clear:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="left">leftdata 1</div>
    <div class="left">leftdata 2</div>
    <div class="right">rightdata 1</div>
    <div class="right">rightdata 2</div>
    <div class="right">rightdata 3</div>
    <div class="right">rightdata 4</div>
</div>

这将提供以下输出：

+--------------------------------------------------------------------+
| leftdata 1                                                         |
| leftdata 2         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
|                                                                    |
+--------------------------------------------------------------------+

但是我期待这个：

+--------------------------------------------------------------------+
| leftdata 1         rightdata 1 rightdata 2 rightdata 3 rightdata 4 |
| leftdata 2                                                         |
|                                                                    |
+--------------------------------------------------------------------+

为什么清楚：左;还清算吧？

我的目标：

我想只添加一个明确的：对;标有课程的DIV：对。这应该产生以下结果：

<style type="text/css">
    div.left {float:left;clear:left;}
    div.right {float:right;clear:right;}
</style>

+--------------------------------------------------------------------+
| leftdata 1                                             rightdata 1 |
| leftdata 2                                             rightdata 2 |
|                                                        rightdata 3 |
|                                                        rightdata 4 |
+--------------------------------------------------------------------+

Answer 1

在你的第一个例子中，rightdata-div放在左边的那些因为它们出现在文档的后面。将它们放在第一位，就可以得到预期的效果。

或者您可以尝试以下方式：

<style type="text/css">
  div.left {
    float: left;
  }

  div.right {
    float: right;

  }
  div.container {
    width:500px;
    overflow: auto; /* to make sure .container expands vertically */
  }

<div class="container">
  <div class="left">
    <div>leftdata 1</div>
    <div>leftdata 2</div>
  </div>
  <div class="right">
    <div>rightdata 1</div>
    <div>rightdata 2</div>
    <div>rightdata 3</div>
    <div>rightdata 4</div>
  </div>
</div>

Answer 2

在CSS中，出于一些愚蠢的原因，重要的是你把浮动的div放入了什么顺序。如果你把＆lt; div class =“right”＆gt; FIRST中的那些（而不是将左边的那些放在第一个），那么右边就不会有那个额外的换行符。

另一件事：我不认为任何人应该永远使用css的clear命令。为什么？因为它可能受到其他周围浮动元素的影响。换句话说，清楚：两者都不仅仅清除了currrent元素中浮动元素的空间，它清除了页面上每个浮动元素的空间。

更好的解决方案是使用overflow：auto;

下面是一些符合你想要的代码：


<style type="text/css">
    div.container {
        width:500px;
        overflow:auto;
    }
    div.left {
        float:left;
    }
    div.right {
        float:right;
    }
</style>
<div class="container">
    <div class="right">rightdata 1</div>
    <div class="left">leftdata 1</div>
    <br>
    <div class="right">rightdata 2</div>
    <div class="left">leftdata 2</div>
    <br>
    <div class="right">rightdata 3</div>
    <br>
    <div class="right">rightdata 4</div>
</div>

编辑：实际上，请注意，在这种情况下，无论是clear还是overflow：auto都不是必须生成leftdata / rightdata div的配置，但如果你想要容器div，它们是必要的扩展到div的高度。没有clear或overflow：auto，div的高度不会扩展以适应它包含的浮动div的高度。

Answer 3

<style type="text/css">
    div.left {float:left;}
    div.right {float:right;}
    br.clear{clear:both;}
</style>

<div class="container">
    <div class="left">
         <div> data 1 </div>
         <div> data 2 </div>
         <div> data 3 </div>
    </div>
    <div class="right">
         <div> right data 1 </div>
         <div> right data 2 </div>
         <div> right data 3 </div>
    </div>
    <br class="clear" />
</div>

Answer 4

我认为最好的办法是做一些事情：

+--------------------------------------------------------------------+
|+------------+                                       +-------------+|
|| leftdata 1 |                                       | rightdata 1 ||
|| leftdata 2 |                                       | rightdata 2 ||
|+------------+                                       | rightdata 3 ||
|                                                     | rightdata 4 ||
|                                                     +-------------+|
+--------------------------------------------------------------------+

编辑：就像john misoskian发布的代码^^

Answer 5

回答你的问题，

clear:left

正在清空。如果您有 float：left ， clear：left 将其清除。我同意其中的其他人 float：left 和 float：right 并不能真正让你进行列格式化。

为什么'清楚：左'也清楚吧？

为什么清楚：左;还清算吧？

5 个答案: