logo标签列表

左浮动和右浮动

csscss-float
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获取的...第一个查询向左，第二个查询向右...非常感谢。
/编辑

This is a mocukup of my HTML structure

我的浮点数结果如下

this is my current result

这就是我想要的

I want this

7
赞美漂亮的图片，批评问题中完全没有标记或CSS！原意不变，通俗易懂。 - James Allardice
1
我已经更新了我的问题并添加了一些HTML代码。由于数据返回的方式，我无法实现左右分列。 - Oldenborg
让我来澄清一下。始终只有六个 div。您需要支持 >=IE7 和所有现代浏览器。您的 HTML 是您在问题中发布的内容，您不能更改它。这些都是真的吗？ - thirtydot
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}

示例

16

您可以使用CSS3的column-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/

每当你回答 CSS3 columns 相关问题时，提到浏览器支持情况是很有用的：http://caniuse.com/multicolumn。例如，这在 IE9 中不起作用，而许多人需要支持 IE9。 - thirtydot
这正是我一直在寻找的。但我需要支持ie7及以上版本。所以它并不完全有用...但你明白了我的意思，因为大多数人没有理解。所以谢谢你。 - Oldenborg
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>
1
为什么？你可以使 <br> 没有任何视觉表现。 - Дамян Станчев
2
我正在处理一个项目，我只能访问CSS文件..其他所有内容都是禁止访问的。 - Oldenborg
1
必须更改结构代码以满足演示的要求，这违背了CSS的整个目的。尽管它能够工作，但这不是一个好的解决方案。 - crush
3
假设您在它们中间有另一个div。那么请按照以下时间顺序进行操作：
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>

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

调整元素的顺序也不是一个好的解决方案。 - crush
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%。

我本来可以做这个，但是我被指示不要动HTML，只能改CSS。 - Oldenborg
2
1
你会用它来做什么（以解决原帖作者的问题）？ - dakab
1
我也想知道，三年后:D - Oldenborg
2

试试这个：

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

0
使用:nth-child选择器并在2个div后清除：
​div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(2n) {
    background-color: green;
    float: right;
}

实时示例

否则，使用这种相当繁琐的方法，不需要额外的标记：

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
}

вАЛеЃЮжЧґз§ЇдЊЛ

我尝试过对其进行修改，但似乎无法做到完美。这是我的进展，我不能触碰HTML..它是固定的.. 我只能使用CSS 实时示例。 - Oldenborg
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接