0

我在一个容器中有很多 div，我想将它们左对齐或右对齐，

问题是，当两个或多个 div 是相同的 class="left" 而不是全部向左时，第二个 div 位于另一个 div 旁边，因为它有空间。同样，当一个是“左”端时，另一个是“右”端，是的，它们可能并排在一起。

这是一个例子： http: //www.bookingmallorca.co.uk/arq/prueba.html

蓝色 div 是从父级到另一侧的 div，没关系，灰色 div 必须向左浮动，红色向右浮动，因为您可能会看到一个灰色没有很好地对齐，因为有

所以我需要一些东西来显示不同的浮动侧div，就像在那个例子中一样，并且相同的浮动值总是浮动在那个浮动值

4

1 回答 1

0

您可以通过引入2 个额外的 .left 和 .right 浮动 div来轻松做到这一点，如下所示。

重要：删除类的现有浮点属性

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 回答