0

コンテナー内に多数の div があり、それらを左または右に揃えたいのですが、

問題は、2 つ以上の div が同じ class="left" である場合、すべてを左に移動する代わりに、2 番目の div がスペースを持っているため、他の div の隣に配置されることです。また、一方が「左」端である場合、もう一方が「右」である場合、それらは並んでいる可能性があります。

以下に例を示します: http://www.bookingmallorca.co.uk/arq/prueba.html

青い div は親の左右の div です。グレーの div は左に、赤の div は右にフロートする必要があります。

だから私が必要とするのは、その例のように異なるfloat側のdivを隣り合わせに表示し、同じfloat値を常にそのfloat値で浮動させることです

4

1 に答える 1

0

以下のように .left と .right の float div を 2 つ追加することで、簡単に行うことができます。

重要:クラスの既存の float プロパティを削除します

HTML

<body>
<div class="hola">
  <div class="left">
     <div class="pau"></div>
     <div class="losdos"></div>
     <div class="gerardo"></div>
     <div class="losdos"></div>
     <div class="pau"></div>
     <div class="gerardo"></div>
  </div>
  <div class="right">
    <div class="gerardo"></div>
    <div class="pau"></div>
    <div class="pau"></div>
    <div class="pau"></div>
    <div class="gerardo"></div>
  </div>
</div>
</body>

CSS

.hola {
    height: 600px;
    margin: auto;
    width: 250px;
}
.hola .pau {
    background: none repeat scroll 0 0 #AFAFAF;
    height: 125px;
    width: 125px;
}
.hola .losdos {
    background: none repeat scroll 0 0 #5FC9F0;
    height: 125px;
    width: 125px;
}
.hola .gerardo {
    background: none repeat scroll 0 0 #F58787;
    height: 125px;
    width: 125px;
}
.hola .left{
    float: left;
    width: 125px;
}
.hola .right{
    float: right;
    width: 125px;
}

JSFIDDLEで作業コピーを見つけることができます

于 2012-11-27T07:18:50.283 に答える