如何在另一组CSS浮动元素下面有一组html元素，而不将CSS添加到第一个元素组中

Question

我要做的事情：

我想创建一个简单的网页，看起来像这样：

[L block]        [R block 1][R block 2]
Body text.

具体而言：

• L block必须左对齐
• R block 1和R block 2必须右对齐并且是动态的——如果调整页面大小，它们将保持在页面的右侧。
  • (假设页面宽度对于"块"和它们之间的一些空间来说总是足够宽。)
• L block、R block 1和R block 2必须都在同一水平面上
• Body text必须低于上述所有值
• Body text不应该需要任何CSS格式
• "顶部块"；应该包装在nav元素中
• 不同的"；顶部块"；应该能够是不同的元素，例如h1、h3

我知道这可以工作的一种方式是将CCD_ 12和CCD_；块"；，然后给出正文CCD_ 14。例如：

<div class="nav-div">
<nav>
<h1 class="nav-left">
[Left Block]
</h1>
<h3 class="nav-right">
[Right Block 1]
</h3>
<h3 class="nav-right">
[Right Block 2]
</h3>
</nav>
</div>

<div class="p-div">
<p>
Inside p tag.
</p>
</div>

.nav-left {
float: left;
}
.nav-right {
float: right;
}
.p-div {
clear: both;
}

(代码位于https://jsfiddle.net/fe2bx5zc/)

但这并不是我想要做的——我不想在正文(.p-div {clear: both;})中添加CSS(就上下文而言，这不是什么实际需求——我只是想更好地理解HTML/CSS是如何工作的…)

我的问题：

是否有可能实现"；我想做的事在不向正文添加任何CSS的情况下创建那个简单的网页？

如果没有，为什么(如果是这样的话，我也很感激，但不要期望，与我在上面的jsfiddle中所做的相比，有任何其他方法的建议，这些方法有不同的优点/缺点。我不知道我所做的是"好"还是"坏"的做法…)

如果是，我该怎么做？

我也很感激，但不要期待任何关于浮动和/或流布局在CSS/HTML中如何工作的解释，以及为什么向左/向右移动也会使其向下移动。我已经查看了文档，但我很难理解这一点

Answer 1

也许可以尝试使用display: flex而不是float，它确实可以使对齐一行中的内容变得容易。我建议访问W3Schools网站，了解如何使用这个美妙的房产。

nav {
display:flex;
justify-content: space-between;
}
nav div{
display:flex;
}

<nav>
<div>
<h1 class="nav-left">
[Left Block]
</h1>
</div>

<div>
<h3 class="nav-right">
[Right Block 1]
</h3>
<h3 class="nav-right">
[Right Block 2]
</h3>
</div>
</nav>

<div class="p-div">
<p>Inside p tag.</p>
</div>