0

私は3つのオブジェクトを持っています:

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="center">Center</div>     
</div>

CSS の概要を次のように定義します。

<style>
    body{width: 100%;padding: 0; margin: 0;}  
    .container{width:960px; margin:30px auto;}
    .left{width:25%; height:100px; background:#f60;;}
    .right{width:25%; height:100px; background:#ff0;;}
    .center{width:50%; height:100px;  background:#f0f;;}
</style>

要件はdiv、次の優先順位に従って並べ替えたことです。

1/左 - 右 - 中央

.left{float:left;}
.right{float:left;}
.center{float:left;}

2/左 - 中央 - 右

.left{float:left;}
.right{float:right;}
.center{float:left;}

3/中央 - 右 - 左

.left{float:right;}
.right{float:right;}
.center{float:left;}

4/右 - 中央 - 左

.left{float:right;}
.right{float:left;}
.center{float:right;}

5/右 - 左 - 中央 ???

6/中央 - 左 - 右???

必須(5)と(6)はできません。私が使用position:absoluteするとこれを行うことができますが、ブラウザの幅を変更しても「コンテナ」は自動的に高さを変更しません（私はレスポンシブテーマを使用します -divパーセンテージで割ります）

HTMLコードを何も変更せずにCSSソリューションを持っている人はいますか?

4

1 に答える 1

0

好きな位置で他のDivの幅に合わせて使ってみてくださいposition: absolute;。leftそしてposition: relative;コンテナへ。

于 2013-09-11T07:11:09.373 に答える