左右对齐的两条线的垂直间距比下面的 <div>

Question

我需要放置两行连续的文本，其中一半文本左对齐，一半文本右对齐，然后是另一段。我正在尝试这样：

<!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>

但是前两行之间的垂直间距比第二行和后面的行之间的垂直间距大<div>。

你知道如何解决这个问题，或者有其他方法可以达到预期的效果吗？谢谢

Answer 1

那是因为你的 p 标签有这个顶部和底部边距，而另一边 div 内容较大的标签没有顶部边距。

解决方法：去掉 p 标签的上边距。参见下面的示例：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>HTML Page</title>
    <style>
    p{
    margin-top:0;
    }
        .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>

左右对齐的两条线的垂直间距比下面的 <div>

Two lines aligned left and right have bigger vertical spacing than following <div>

html

css

css-float