使用flex时如何在HTML中添加新行？

问题描述

我希望单独的消息在它们之间有一些垂直距离。每条消息都是一个跨度，这里是我为跨度编写的 CSS 代码：

span {
        color: #eeeeee;
        float: right;
        font-size: 120%;
        margin-right: 6%;
        margin-left: 30%;
        background-color: #393e46;
        border-radius: 25px 25px 5px 25px;
        padding: 10px 18px 10px 20px;
        margin-top: 2%;
        padding-left: 20px;
        padding-right: 20px;
    }

这是两条相邻的消息的代码：

<span style="padding: 10px 20px 10px 18px;">hey</span>
<br>
<span style="float: left; margin-left: 6%; margin-right: 30%; border-radius: 25px 25px 25px 5px; background-color: rgb(104,109,117); padding: 10px 20px 10px 18px;">Hi!</span>

结果如下：

我忘了说这是短消息（长度少于 4 个字符）的问题。有没有什么办法解决这一问题？我尝试使用 div 而不是 span 并且我在那里遇到了同样的问题。我尝试调整 margin，但效果不够好，无法使用它（长消息在这些边距下看起来很糟糕，整个代码开始变得混乱，我不希望这样）。

提前致谢。

解决方法

将 clear: both; 添加到您的 <br> 以打破浮动，这将产生一个新行。

你可以使用 flex 并做到这一点。

 <div style="display:flex"> 
   <span style="float:left;padding: 10px 20px 10px 18px;">hey</span>
 <span style="margin-left: auto;
  order: 2; background-color: rgb(104,109,117); padding: 10px 20px 10px 18px;">Hi!</span>
  </div>

您可以在第二个 span 中添加 margin-top:__（取决于您想要的距离）

span {
        color: #eeeeee;
        float: right;
        font-size: 120%;
        background-color: #393e46;
        border-radius: 25px 25px 5px 25px;
        padding: 10px 18px 10px 20px;
        margin-top: 2%;
        padding-left: 20px;
        padding-right: 20px;
    }
    #first{
    padding: 10px 20px 10px 18px;
    }
    #second{
    float: left;
    margin-left: 6%; 
    margin-right: 30%;
    border-radius: 25px 25px 25px 5px;
    background-color: rgb(104,117); 
    padding: 10px 20px 10px 18px;
    margin-top:40px;
    }

    <span id="first">hey</span>
<br>
<span id="second">Hi!</span>

html margins spacing