5

我一直在努力让 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>

这将给出以下输出：

+-------------------------------------------------- ------------------+
| 左数据 1 |
| 左数据 2 右数据 1 右数据 2 右数据 3 右数据 4 |
| |
+-------------------------------------------------- ------------------+

但是我期待这个：

+-------------------------------------------------- ------------------+
| 左数据 1 右数据 1 右数据 2 右数据 3 右数据 4 |
| 左数据 2 |
| |
+-------------------------------------------------- ------------------+

为什么很清楚：左；也清算吧？

我的目标：

我只想添加一个 clear:right; 到标有 class: right 的 DIV。这应该产生以下内容：

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

+-------------------------------------------------- ------------------+
| 左数据 1 右数据 1 |
| 左数据 2 右数据 2 |
| 右数据 3 |
| 右数据 4 |
+-------------------------------------------------- ------------------+
4

5 回答 5

4

在您的第一个示例中，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>
于 2009-06-24T12:08:25.667 回答
2

在 CSS 中，出于某种愚蠢的原因，放置浮动 div 的顺序很重要。如果将 <div class="right"> 放在第一个（而不是把左边的放在第一个），那么就不会有是右边那个额外的换行符。

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

更好的解决方案是使用溢出：自动；

这里有一些代码可以满足您的需求：


<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 的高度。

于 2009-07-27T18:42:04.077 回答
1 
<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>
于 2009-06-24T12:02:39.173 回答
1

我认为您最好的选择是执行以下操作：

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

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

于 2009-06-24T12:06:08.057 回答
1

回答你的问题，

clear:left

正在清理左边。如果你有一个float:left，clear:left清除它。我同意float:left和float:right中的其他人的观点并不能真正为您提供列格式。

于 2009-06-24T12:16:25.603 回答