换行后如何水平对齐 div？答案

【问题标题】：How do you horizontally align a div after a wrap?换行后如何水平对齐 div？
【发布时间】：2022-01-26 05:24:34
【问题描述】：

假设我们有 9 个 div 显示为 float:left，每个 350px 宽，高度分别为 200、400、300、350、300、200、450、100 和 400。窗口只能容纳 4 个他们连续。我观察到的是第一个 4 格按预期显示，但第 5 个格（换行后）从 div3 下的 x=700 开始。我们不能确定在哪个 div 之后会有一个换行，但无论何时发生，我们都希望它从 0 开始，即 div 5 应该出现在 div1 之下，依此类推，例如，期望 div9 在 div5 之下。我们怎样才能做到这一点？谢谢。

<html>
    <body style="padding:20px;">
            <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
            <div style="float:left; width:350; height:400 border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
            <div style="float:left; width:350; height:300 border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
            <div style="float:left; width:350; height:350 border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
            <div style="float:left; width:350; height:300 border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
            <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
            <div style="float:left; width:350; height:450 border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
            <div style="float:left; width:350; height:100 border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
            <div style="float:left; width:350; height:400 border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
    </body>

【问题讨论】：

你看过 CSS 网格或 flexbox 吗？
不，我没有。能给我指点一下吗？
clearfix 有帮助吗？
我认为你最好使用百分比而不是 'px' 作为 div 宽度。

标签： css

【解决方案1】：

您应该在正文标签中添加display: flex;，然后添加flex-wrap: wrap; 属性。
还将px、rem 等单位添加到 div 的高度和宽度属性中

<body style="padding:20px; display: flex; flex-wrap: wrap;">
  <div style="width:350px; height:200px; border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
  <div style="width:350px; height:400px; border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
  <div style="width:350px; height:300px; border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
  <div style="width:350px; height:350px; border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
  <div style="width:350px; height:300px; border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
  <div style="width:350px; height:200px; border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
  <div style="width:350px; height:450px; border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
  <div style="width:350px; height:100px; border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
  <div style="width:350px; height:400px; border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
</body>

【讨论】：

float 样式在使用 flex 时可以被移除。
我知道，我忘了删除它们。感谢告知
它不会明智地解决问题，因为 div 不能很好地垂直放置。
很明显这不会明智地解决问题。但他只问他怎么能把第 1 格放在第 5 格以下等等。这只是那个问题的答案

【解决方案2】：

使用弹性是最佳的

<html>
        <body style="display:flex; flex-wrap: wrap; padding:20px;">
                <div style="width:350; height:200 border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
                <div style="width:350; height:400 border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
                <div style="width:350; height:300 border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
                <div style="width:350; height:350 border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
                <div style="width:350; height:300 border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
                <div style="width:350; height:200 border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
                <div style="width:350; height:450 border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
                <div style="width:350; height:100 border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
                <div style="width:350; height:400 border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
        </body>
    </html>

【讨论】：

它不会明智地解决问题，因为 div 不能很好地垂直放置。

【解决方案3】：

使用

.className{ clear:both; }

<html>
    <body style="padding:20px;">
        <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 1 <br/> div 1 <br/> div 1 <br/> div 1 <br/></div>
        <div style="float:left; width:350; height:400 border:3px solid #cacafe">div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/> div 2 <br/></div>
        <div style="float:left; width:350; height:300 border:3px solid #cacafe">div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/> div 3 <br/></div>
        <div style="float:left; width:350; height:350 border:3px solid #cacafe">div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/> div 4 <br/></div>
        <div style="float:left; clear:both; width:350; height:300 border:3px solid #cacafe">div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> div 5 <br/> </div>
        <div style="float:left; width:350; height:200 border:3px solid #cacafe">div 6 <br/> div 6 <br/> div 6 <br/> div 6 <br/></div>
        <div style="float:left; width:350; height:450 border:3px solid #cacafe">div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/> div 7 <br/></div>
        <div style="float:left; width:350; height:100 border:3px solid #cacafe">div 8 <br/> div 8 <br/></div>
        <div style="float:left; clear:both; width:350; height:400 border:3px solid #cacafe">div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/> div 9 <br/></div>
    </body>
</html>

它会解决问题。干杯！

【讨论】：

这行不通。我们不知道哪个 div 导致了换行。所以我们不知道把“clear:both;”放在哪个 div 上。在。感谢 fubar 和 Gahan Vig，flex 和 flex-wrap 解决了这个问题。
明确哪个div需要设置属性为clear:both;就在 4 日、8 日、12 日之后..
不，它不是 - 如果用户缩小了窗口（例如，减小了宽度），那么 clear:both 可能必须在第 3、第 6、第 9 等之后应用。我的观点问题是这些信息（窗口宽度）是事先不知道的，并且可以动态变化。
PS：如果我想硬编码 4 日、8 日等之后的休息时间，我会使用表格来解决问题。