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

【问题标题】：css arrange two div block in different row [duplicate]css在不同的行中排列两个div块[重复]
【发布时间】：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-block{position:relative} 并给第一个和第二个块一些尺寸示例宽度：100％和高度：50px。考虑使用 flexbox 而不是 float
感谢所有温暖人心的人。我误解了函数div 并认为div 中的所有内容都将被分隔成块。我会做你的向导。

标签： html css

【解决方案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”方法？ stackoverflow.com/questions/211383/…
如何防止浮动元素的父级折叠？ stackoverflow.com/questions/218760/…
什么是clearfix？ stackoverflow.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>

【讨论】：