css在不同的行中排列两个div块[重复]

Posted 2023-03-04

【中文标题】css在不同的行中排列两个div块[重复]

【英文标题】：css arrange two div block in different row [duplicate]

【发布时间】：2020-11-05 19:52:14

【问题描述】：

我正在尝试将两个 div 排列在不同的行中。在我添加一些浮动元素之前，它们工作正常。有人可以帮我解决这个问题吗？第二行无法显示为普通的 div 块，我不知道如何解决。

<style>
li 
    list-style-type: none;


h4 
    float:left;
    

ul 
    float:right;
    

    
.first-block 
    
    
    
.second-block 
    position:relative;
    

</style>

<div class="first-block">
    <h4>Left Top</h4>
    <ul><li>Right Top</li></ul>
</div>

<div class="second-block">
    <h4>Left Bottom</h4>
    <ul><li>Right Bottom</li></ul>
</div>

【问题讨论】：

如果您在浏览器中检查该元素，您可以看到发生了什么。因为您使用 float，所以 h4 和 ul 的大小不会拉伸父 div，因此它们的大小都将为 0，并且会并排显示。

使用浮动元素从他的正常流程中删除。所以第一个和第二个块的宽度：0 和高度：0。所以首先设置 .first-blockposition:relative 并给第一个和第二个块一些尺寸示例宽度：100％和高度：50px。考虑使用 flexbox 而不是 float

感谢所有温暖人心的人。我误解了函数div 并认为div 中的所有内容都将被分隔成块。我会做你的向导。

【参考方案1】：

我认为你需要像下面这样清除浮动

.second-block 
    position:relative;
    clear: both;

在这种情况下使用 flex-box 会很有用。

【参考方案2】：

您需要清除浮动，因为浮动元素的父级确实会崩溃。了解如何使用 clearfix。许多方法之一是在此处使用overflow: auto。

但对于您可能想要实现的目标，使用flexbox 可能会更好。

li 
  list-style-type: none;


div h4 
  float: left;


div ul 
  float: right;


.block 
  overflow: auto;


.first-block 
  background-color: rgba(0, 0, 255, 0.1);


.second-block 
  background-color: rgba(0, 255, 0, 0.1);

<div class="block first-block">
  <h4>Left Top</h4>
  <ul>
    <li>Right Top</li>
  </ul>
</div>

<div class="block second-block">
  <h4>Left Bottom</h4>
  <ul>
    <li>Right Bottom</li>
  </ul>
</div>

【讨论】：

我可以使用哪些“clearfix”方法？ ***.com/questions/211383/…

如何防止浮动元素的父级折叠？ ***.com/questions/218760/…

什么是clearfix？ ***.com/questions/8554043/what-is-a-clearfix

【参考方案3】：

请检查下面的代码 sn-p。使用clear: both CSS 属性将不同行中的 div 对齐。

希望这会有所帮助。

<style>
li 
    list-style-type: none;


h4 
    float:left;
    

ul 
    float:right;
    

    
.first-block 
    
    
    
.second-block 
    position:relative;
    clear: both;

</style>

<div class="first-block">
    <h4>Left Top</h4>
    <ul><li>Right Top</li></ul>
</div>

<div class="second-block">
    <h4>Left Bottom</h4>
    <ul><li>Right Bottom</li></ul>
</div>

【参考方案4】：

当您使用浮动时，浮动元素的容器大小不会变大，因为浮动元素已从正常流程中移除。所以如果你给容器一些维度，它就会起作用。

Float documentation

但考虑使用flexbox

li 
    list-style-type: none;


h4 
    float:left;
    

ul 
    float:right;

    
.first-block 
    position:relative;
     width:100%;
    height:50px;
    border:1px solid blue;
    
    
.second-block 
    position:relative;
    width:100%;
    height:50px;
    border:1px solid red;

<div class="first-block">
    <h4>Left Top</h4>
    <ul><li>Right Top</li></ul>
</div>

<div class="second-block">
    <h4>Left Bottom</h4>
    <ul><li>Right Bottom</li></ul>
</div>