Css 父Div上的Div浮动问题_Css_Html_Css Float

Css 父Div上的Div浮动问题

css html

Css 父Div上的Div浮动问题,css,html,css-float,Css,Html,Css Float,我在一个容器中有很多div，我想将它们向左或向右对齐问题是，当两个或多个div是同一个class=“left”而不是所有div都向左移动时，第二个div就位于另一个div的旁边，因为它有空间。另外，当一个是“左”端，另一个是“右”端时，是的，它们可以并排呆在一起以下是一个例子：蓝色div是从父对象的一侧到另一侧的div，没关系灰色的div必须向左浮动，红色的div必须向右浮动，正如您可能看到的那样，有一个灰色没有很好地对齐所以我需要的是一些东西来显示不同的浮动边div，就像在那个例子中

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

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

以下是一个例子：

蓝色div是从父对象的一侧到另一侧的div，没关系灰色的div必须向左浮动，红色的div必须向右浮动，正如您可能看到的那样，有一个灰色没有很好地对齐

所以我需要的是一些东西来显示不同的浮动边div，就像在那个例子中一样，并且相同的浮动值总是浮动在这个浮动值上，你可以很容易地通过引入下面的额外的.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>

您可以在

上找到工作副本如果您尝试将

清除：两个添加到pau，会发生什么？我发现很难理解您想要什么。你说你想让灰色的div向左浮动，红色的div向右浮动，但是在这个例子中你已经做到了。是的，我理解，但是我的div是php自动创建的，所以这不是一个选项，我理解，但是我的div是php自动创建的，所以这不是一个选项。问题很清楚：两者都有；当两个div分别是一个“gerardo”和一个“pau”时，它们不会再保留。好的，当然。然后请更新您的答案，并将其作为答案接受，并添加新的标签（也作为php）。如果这是一个php问题，那么我从未回答过。因为我不是一个php人。在你更新你的答案后，我将删除我的答案。谢谢。@user1855206这里的服务器端代码是php，这与这个答案的有效性无关。PHP生成HTML。只要把这段代码修改一下就行了。
.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;
}