web-dev-qa-db-ja.com

左右にフロート

この問題はしばらく私を悩ませてきました。だから私は私の問題のいくつかの視覚的な説明を作成しました

最初は、6つのdivがあるHTML構造です。最初の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からデータベースへのクエリを介してデータを取得しています。最初のクエリが左に移動し、2番目のクエリが右に移動します...束

/編集

This is a mocukup of my HTML structure

私のフロートはこれになります

this is my current result

これは私が欲しいものです

I want this

csscss-float
32
Oldenborg

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

15
sandeep

左に1つ、右に1つフロートし、最初に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}

例

19
khaled_webdev

最初の左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>
7
Дамян Станчев
<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％の幅でフロートさせる場合です。

3
bdede

中央に別のdivがあるとします。次に、この時系列順を使用します。

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

または、そうでない場合は、スタイルを提供する別のdivを追加しますclear:bothそれに。

3
Tepken Vannkorn

column-countはすでに広くサポートされています- http://caniuse.com/#feat=multicolumn したがって、古いブラウザが気にならなければ、それを使用することを検討してください。

2
Vlad

これを試して：

.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>
1
Ricky Stam

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

ライブ例

0
jacktheripper