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からデータベースへのクエリを介してデータを取得しているため、左右左右左右のオプションを実行できません。最初のクエリは左に移動します。2番目のクエリは右に移動します。

/編集

これは私のHTML構造のモックアップです

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

これが私の現在の結果です

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

これ欲しい

4

8 に答える 8

20

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

例

于 2012-06-12T10:14:59.293 に答える
16

これにはCSS3column-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-12T10:48:08.483 に答える
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>
于 2012-06-12T10:12:59.797 に答える
3

それらの真ん中に別のdivがあるとします。次に、この時系列の順序を使用します。

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

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

于 2012-06-12T10:15:31.510 に答える
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％です。

于 2012-06-12T10:30:40.520 に答える
2

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

于 2016-01-30T18:18:40.530 に答える
1

これを試して：

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

于 2014-02-15T21:43:06.297 に答える
0

：nth-​​childセレクターを使用し、2div後にクリアします。

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

実例

于 2012-06-12T10:19:47.263 に答える