左右浮动[英] Float left and right

本文是小编为大家收集整理的关于左右浮动的处理方法,想解了左右浮动的问题怎么解决?左右浮动问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

这个问题一直困扰着我.因此,我创建了一些有关问题的视觉描述

首先,这里是我的HTML结构,我有6个Divs ..前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获取数据库的数据..第一个查询左第二查询右转....谢谢一堆

/edit

这是我的html结构的mocukup

我的浮子​​导致此

这是我当前的结果

这就是我想要的

我想要这个

推荐答案

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

其他推荐答案

向左浮动,一个右一个,首先给出清晰的:两个属性

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

示例

其他推荐答案

添加第一个左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>

本文地址:https://www.itbaoku.cn/post/570790.html