フロート左と右

この問題はしばらく私を悩ませています。だから、私の問題の視覚的な説明をいくつか作成しましたフロート左と右

私は6つのdivs ..最初の3つの浮動小数点があり、最後の3つの浮動小数点は右です。最後の画像は私が望む結果を示していますが、得られないようです。そこに誰かが私をここに助けることができる

EDIT //申し訳HERESに私の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から私のデータを取得するために右のオプションを左、左、右、左、右を行うカント私のデータベースに...最初のクエリは、左の2番目のクエリは、右行く行く....おかげでたくさん

/EDIT

This is a mocukup of my HTML structure

マイF loatsは、これは私が

I want this

出典

2012-06-12 Oldenborg

コードを入れてください... –

いい画像の場合は+1、質問の場合はマークアップやCSSがない場合は-1 –

1つ左、1つ右 –

これに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/

出典

2012-06-12 10:48:08 sandeep

CSS3の列で答えるたびに、ブラウザのサポートについて言及すると便利です：http://caniuse.com/multicolumn。たとえば、これは多くの人々がサポートする必要があるIE9では機能しません。 – thirtydot

これはまさに私が探していたものでした。しかし、私はie7以上のサポートが必要です。だから、それは完全に有用ではありません。しかし、あなたはほとんどのppl didntとして考えを得ました。ありがとう。 – Oldenborg

IEの場合は、このJS http://www.csscripting.com/css-multi-column/ – sandeep

が最初に左のdiv、最初の右のdivを追加し、それらを<br style="clear:both">を追加し、手順を繰り返した後、何をしたいです。この

this is my current result

になります。

編集：

<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-12 10:12:59

申し訳ありませんこれはオプションではありません – Oldenborg

なぜですか？ **
**には視覚的な表現は全くありません。 –

私がアクセスできる唯一のサイトは、CSSファイルです。他のすべてはオフラインです – Oldenborg

フロート1つの左、1つの右の、そして最初の明確なを与える：プロパティの両方

<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

出典

2012-06-12 10:14:59

@jacktheripper：良い、あなたは私の前にそれをした –

中に別のdivがあるとします。

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

それとも、単にそれにスタイルclear:bothを提供し、別のdivを追加しない場合：次に、この年代順を使用します。 2つのdiv後のn番目の子セレクタとクリア：使用

出典

2012-06-12 10:15:31

クラスではない;） –

ああ、はい。ありがとう@khaled_webdev –

要素の順序を操作することは良い解決策でもありません。 – crush

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 
}

：

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

Live example

は、そうでなければ、追加のマークアップを必要としないこのかなりハック方法を使用します Live example

出典

2012-06-12 10:19:47 jacktheripper

私はそれを少し改造してみましたが、それを正しくすることはできません。ここで私はどこで私はHTMLに触れることはできません..これは固定..私はCSS [ライブ例]（http://jsfiddle.net/nSDcb/）とだけ動作することができます – Oldenborg

<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-12 10:30:40 bdede

私はwoudがこれを行ったが、指示されたHTMLに触れないように、私はCSSを変更するだけです – Oldenborg

HTML：

<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"></div>

STYLES：

.leftcolums{float:left;} 
.rightcolums{float:right;} 
.clear{clear:both;}

出典

2014-02-15 21:43:06

column-countはすでに広くサポートされている - そうhttp://caniuse.com/#feat=multicolumn 古いブラウザでは、」doesnの場合あなたが私を使用することを検討して気にしないt。

出典

2016-01-30 18:18:40 Vlad

を使用することができます。そして、OPの問題を解決するにはどうすればいいですか？ – dakab

私は知りたい、3年後：D – Oldenborg

答えて

関連する問題