1

http://jsfiddle.net/y88mq/1/

1つ、2つ、3つのコンテナの3つのコンテナを持つ単純なレイアウトがあります。私は3つを1つに揃えようとしています。現在、1つと2つは左に浮かんでおり、3つは右に浮かんでいます。クリアの組み合わせを試しましたが、うまくいかなかったようです。これをCSSだけで動作させたいと思います。

<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>

.left {
    background: red;
    width: 66%;
    height: 200px;
    margin-bottom: 10px;
    float: left;
}

.right {
    background: green;
    width: 33%;
    float: right;
    height: 200px;
}

編集：ソースの順序を同じに保ちたい

4

5 に答える 5

1

CSSとその邪悪なフロートの性質上、ボックスの順序を並べ替えることをお勧めします。これは正常に機能します。

<div class="left">one</div>
<div class="right">three</div>
<div class="left">two</div>

参照： http： //jsfiddle.net/y88mq/2/

于 2013-03-17T18:12:34.000 に答える
1

HTMLの順序を同じに保つ必要がある場合、私が考えることができるのは次を使用することだけです。

position: absolute;

私はあなたのフィドルに変更を加えました：http：//jsfiddle.net/hRdEf/

お役に立てば幸いです。

于 2013-03-17T18:31:57.603 に答える
0

リストされたdivの上部に「rightdiv」を配置するだけです。

<div class="right">three</div>    
<div class="left">one</div>
<div class="left">two</div>

..//rest of code

http://jsfiddle.net/y88mq/7/

于 2013-03-17T18:15:47.787 に答える
0 
<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>

.left {
   background: red;
   width: 32%;
   height: 200px;
   margin-right:  20px;
   float: left;
}

.right {
   background: green;
   width: 33%;
   float: right;
   height: 200px;
}
于 2013-03-17T18:31:59.800 に答える
0

1列目と2列目をdivでラップすると、ラッパーdivと3列を効果的に並べて、上部に揃えることができます。ラッパーdivは、列1と2をスタックして保持します。

このアプローチの追加の利点は、使用可能なスペースが多い場合に、1行に1列目と2列目を揃えることを選択できることです。

意味的には、列は同じ順序のままです。

于 2014-01-04T17:51:35.553 に答える