36

这个问题困扰了我一段时间。所以我为我的问题创建了一些视觉描述

首先是我的 HTML 结构，我有 6 个 div。前 3 个向左浮动，最后 3 个向右浮动。最后一张图片显示了我想要但似乎无法得到的结果。有人可以在这里帮助我吗

编辑//对不起，我的 HTML 和 CSS

<style>
    .left { float:left; }
    .right { float:right; }
</style>
<div id="container">
   <div class="left"></div>
   <div class="left"></div>
   <div class="left"></div>
   <div class="right"></div>
   <div class="right"></div>
   <div class="right"></div>
</div>

注意：我不能做一个左右左右选项，因为我通过查询从 PHP 获取我的数据到我的数据库..第一个查询向左第二个查询向右....谢谢一堆

/编辑

这是我的 HTML 结构的模型

我的花车导致了这个

这是我目前的结果

这就是我要的

我要这个

4

8 回答 8

20

向左浮动，向右浮动，并首先给出 clear:both 属性

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

css

.left {float:left}
.right {float:right}
.clear {clear:both}

例子

于 2012-06-12T10:14:59.293 回答
16

您可以为此使用 CSS3column-count属性。像这样写：

.parent{
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 2;
    column-gap: 50%;
}
.parent div{
    width:50px;
    height:50px;  
    margin:10px;
}
.left{
    background:red;
}
.right{
    background:green;
}

检查这个http://jsfiddle.net/UaFFP/6/

于 2012-06-12T10:48:08.483 回答
7

添加第一个左 div，然后添加第一个右 div，然后添加<br style="clear:both">并重复该过程。

编辑：这是一个更新的答案：

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
于 2012-06-12T10:12:59.797 回答
3

假设您在它们中间有另一个 div。然后使用这个时间顺序：

<div class="left"></div>
<div class="right"></div>
<div class="content"></div>

或者，如果您不这样做，只需添加另一个为其提供样式clear:both的 div。

于 2012-06-12T10:15:31.510 回答
3 
<style type="text/css">

.parent {width:50px; border:1px solid red;}

.left {float:left; }

.right{float:right;}

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;}

</style>

<body>

<div class="left parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

<div class="right parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

</body>

</html>

请注意，如果没有中央 DIV 会很奇怪，如果是这样的话，父 DIV 会向左浮动，例如宽度为 20% 60% 20%。

于 2012-06-12T10:30:40.520 回答
2

column-count已经得到广泛支持 - http://caniuse.com/#feat=multicolumn 所以如果旧浏览器不打扰你考虑使用它。

于 2016-01-30T18:18:40.530 回答
1

尝试这个：

.leftcolums {
  float: left;
}

.rightcolums {
  float: right;
}

.clear {
  clear: both;
}
<div class="leftcolums">
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
</div>
<div class="rightcolums">
  <div class="right">4</div>
  <div class="right">5</div>
  <div class="right">6</div>
</div>
<div class="clear">7</div>

于 2014-02-15T21:43:06.297 回答
0

使用 :nth-child 选择器并在 2 个 div 后清除：

​div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(2n) {
    background-color: green;
    float: right;
}

活生生的例子

否则使用这个相当hacky的方法，它不需要额外的标记：

div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(n) {
    clear: both;
}

div:nth-child(2n) {
    background-color: green;
    float: right;
    margin-top: -50px; //match this to the div height
}

​现场 示例

于 2012-06-12T10:19:47.263 回答