Html 左右对齐的两条线的垂直间距比下面的_Html_Css_Css Float

Html 左右对齐的两条线的垂直间距比下面的

html css

Html 左右对齐的两条线的垂直间距比下面的,html,css,css-float,Html,Css,Css Float,我需要放置两个连续的行，其中一半文本向左对齐，一半文本向右对齐，然后再放一段。我试着这样做： <!DOCTYPE html> <html lang="en-US"> <head> <title>HTML Page</title> <style> .left { float: left; } .right { flo

我需要放置两个连续的行，其中一半文本向左对齐，一半文本向右对齐，然后再放一段。我试着这样做：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>HTML Page</title>
    <style>
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div>
    <div>
        <p class="left">Left align.</p>
        <p class="right">Right align.</p>
    </div>
    <div style="clear: both;">
        <p class="left">Left align.</p>
        <p class="right">Right align.</p>
    </div>
    <div style="clear: both;" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula neque, tempus ut dictum in, feugiat non sem. Nam ultricies cursus sodales. Duis est justo, hendrerit non accumsan vitae, rutrum vel elit. In quis elit purus. Aenean nec massa elementum, laoreet augue sed, gravida felis. Nullam nec faucibus nisl. Donec vel nunc vitae justo auctor placerat ut eu purus. Duis ut porta felis. Fusce mollis, nibh a cursus consectetur, lorem metus lobortis felis, ac gravida sapien purus non enim. Nam pharetra dolor nisi, in scelerisque eros fermentum ut. 
    </div>
    </div>
</body>
</html>

但前两条线之间的垂直间距大于第二条线和第二条线之间的垂直间距

你知道如何解决这个问题，或者用另一种方法来获得预期的结果吗？谢谢。

这只是因为你的p标签有上下边距，而在另一边，内容较大的div没有上边距

解决方案：删除p标签的上边距。见下文：

HTML页面 p{ 边际上限：0； } .左{ 浮动：左； } .对{ 浮动：对； }

左对齐

右对齐

左对齐

右对齐

Lorem ipsum dolor sit amet，是一位杰出的献身者。不，不，不，不。Nam ultricies诅咒苏打水。这是一个很好的例子，它是一种非累积性的生命，是一种精英级的红宝石。在奎斯精英普鲁斯。埃尼安·内克·马萨·元素，劳里特·奥古斯特·塞德，孕妇猫。努拉姆nec福西布斯nisl。不要把你的生命放在一边。这是我们的猫之门。mollis，nibh a cursus concertetur，lorem metus lobortis felis，ac孕妇sapien purus non enim。Nam pharetra dolor nisi，在节杖厄洛斯发酵罐中。