打破css浮动和清除的默认布局答案

【问题标题】：Break default layout of css float and clear打破css浮动和清除的默认布局
【发布时间】：2020-06-10 22:36:25
【问题描述】：

我有四个这样大小的 div，它们位于具有一定宽度的主容器中。如果我只为每个 div 设置 float left，它们将显示如下：

##########################################################
#                          ##             ##             #
#                          ##             ##             #
#            5             ##      6      ##      7      #
#                          ##             ##             #
#                          ##             ##             #
##########################################################
############################
#                          #
#                          #
#                          #
#                          #
#            8             #
#                          #
#                          #
#                          #
#                          #
#                          #
############################

现在我希望它们像跟随一样，而不是将它们放入另一个容器中，如何使其工作？

#########################################################
#                           ##                          #
#                           ##                          #
#            5              ##                          #
#                           ##                          #
#                           ##            8             #
##############################                          #
##############################                          #
#             ##            ##                          #
#             ##            ##                          #
#      6      ##      7     ##                          #  
#             ##            ##                          #  
#             ##            ##                          #
#########################################################

【问题讨论】：

我们可以看看你的代码吗？？
暂时在这里：emoceanstudios.com.au/portfolio.php
您是否有理由不希望它们被另一个容器 div 包裹？
其实是一些函数生成的，不容易修改
知道了，如果是这样，那么我认为提到将它们浮动到右侧的海报有点走上正轨，如果仍然不好，那么也许您可以考虑使用固定定位。显然，最好的方法是拥有一个包装器 div，然后将它们浮动在包装器内，但正如您所提到的，修改它并不容易。

标签： javascript html css css-float

【解决方案1】：

试试这个方法，你将不得不将左浮动作为 div 的总和。

    <div id="main">
<!-- Wrapper for divs 5, 6 & 7 -->
     <div id="567">
      <div id="5"></div>
<!-- Wrapper for divs 6 & 7 -->
      <div id="67">
       <div id="6"></div>
       <div id="7"></div>
      </div>
     </div>
     <div id="8"></div>
    </div>

【讨论】：

我了解您在此处处理您的标记所做的事情，但发布无效标记不利于其他人试图了解正在发生的事情。
只看它并概述它，我故意放了 dat，以便他根据他的命名了解哪个 div 去哪里。
你可以试试
也可以像这样使用 cmets，例如：我知道这是一个监督，但我认为这在实践中很好。
实际上，将它们浮动到右侧解决了问题，谢谢大家！

【解决方案2】：

尝试像这样订购 div 并使用浮点数：

<div class="main">
    <div class="div div-8">Content #8</div>
    <div class="div div-5">Content #5</div>
    <div class="div div-7">Content #7</div>
    <div class="div div-6">Content #6</div>
</div>

CSS

.main div {float: right;}

http://jsfiddle.net/v6RR5/2/

【讨论】：

如果它有助于考虑支持答案或/并接受它:)

【解决方案3】：

我只是想得到你想要的结果。这可能不是最好的方法，因为我为块分配了一个高度。你可以玩HERE。

HTML：

<div class="container">
    <div class="five">5</div>
    <div class="eight">8</div>
    <div class="six">6</div>
    <div class="seven">7</div>
</div>

CSS：

.container{
    display: block;
    width: 100%;
    height: 350px;
    overflow: hidden;
}
.five{
    float: left;
    width: 50%;
    height: 200px;
    line-height: 200px;
    background: #666;    
    text-align: center;
    font-size: 60px;    
}
.eight{
    float:right;
    width: 50%;
    height: 350px;
    line-height: 350px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 60px;  
}
.six, .seven{
    float: left;
    width: 25%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 60px; 
}
.six{background: #ccc;}
.seven{background: #999;}

【讨论】：