Float left and right

2020-02-24 07:32发布

站内问答 / HTML/CSS
727 8 6

this problem has been bothering me for some time. So I have created some visual descriptions of my problem

First here is my HTML structure I have 6 divs.. the first 3 float left and the last 3 float right. The last image shows the result I want but can't seem to get. Can someone out there help me here

EDIT// Sorry heres my HTML and 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>

NOTE: I Cant do a left right left right left right option because Im getting my data from PHP via a Query to my database.. first query goes left second query goes right.... thanks a bunch

/EDIT

This is a mocukup of my HTML structure

My floats result in this

this is my current result

This is what I want

I want this

标签： css css-float
举报
8条回答
迷人小祖宗
2楼-- · 2020-02-24 08:07

Float one left , one right, and give first the clear:both property

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

Example

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
3楼-- · 2020-02-24 08:11 
<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>

Mind it would be odd not to have a central DIV, if that is a case float the parent DIVs left, at say widths of 20% 60% 20%.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)