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>

1 个答案: