Question

我有想要浮动的树形元素，

<div class="title">Name</div>
<div class="description">slogan</div>
<div class="navbar"></div>

Css是：

.title, .description{
float:left;
}
.navbar{
float:right;
}

我希望网站描述在导航栏之前位于标题下方。

所以，我知道我的HTML是错误的，两个浮动左边应该在他们自己的div中，并且div应该有一个百分比宽度，以便它强制它们堆叠，但设置宽度不是我想要的这样做可以限制可输入的内容。理想情况下，我只需要三个内联元素，因此它们的宽度可以是动态的。

谢谢！杰西。

编辑：

这是小提琴： https://jsfiddle.net/fLw8xac0/1/

正如您可以看到导航栏首先叠加

Answer 1

只需将.description放在.navbar下，然后移除float。

<style>
    .title {float: left;}
    .navbar {float: right;}
</style>

<div class="title">Name</div>
<div class="navbar"></div>
<div class="description">slogan</div>

https://jsfiddle.net/fvqx6z3f/

Answer 2

你应该在标题和描述div上放置一个包装div，并在包装器上设置float。

https://jsfiddle.net/8dpmfcf5/

HTML

<body>
  <div class="wrap">
      <div class="title">Name</div>
      <div class="description">slogan</div>
  </div>
  <div class="navbar">nav</div>
</body>

CSS

  .wrap{
    float:left;
  }
  .navbar{
    float:right;
  }

html浮动堆叠顺序

2 个答案: