Question

我在容器中有很多div，我想左右对齐，

问题是，当两个或多个div相同时，class =“left”而不是所有它们都向左移动，第二个div位于另一个div的旁边，因为它有空间。此外，当一个是“左”时，另一个是“正确的”，是的，它们可以并排存在。

以下是一个示例：http://www.bookingmallorca.co.uk/arq/prueba.html

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

所以我需要的是显示彼此相邻的不同浮点数div，就像在该示例中一样，并且相同的浮点值始终浮动在该浮点值

Answer 1

您可以通过引入 2附加.left和.right float 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

上找到工作副本

父div上的Div float问题

1 个答案: