html - 如何按特定顺序将 3 个元素并排 float ？

Question

我有四个元素，其中三个我想与下方的页脚并排放置。我现在遇到的问题是在不更改任何 HTML(例如订单)的情况下获得我想要的订单。

我目前有这段代码:

#nav {
  background-color: red;
  width: 15%;
  float: left;
}

#intro {
  background-color: yellow;
  width: 15%;
  float: right;
}

#content {
  background-color: blue;
  width: 70%;
  float: right;
}

footer {
  background-color: magenta;
  clear: both;
}

<div id="container">
  <section id="intro">...</section>
  <div id="content">...</div>
  <aside id="nav">...</aside>
  <footer>...</footer>
</div>

在这里你可以看到我得到的是红色、蓝色和黄色的颜色顺序。但我想要的顺序是红色、黄色，然后是蓝色。

Answer 1

在黄色 div 上使用 display:inline-block 并移除 float

#intro {
  background-color: yellow;
  width: 15%;
  display:inline-block;
}
#nav {
  background-color: red;
  width: 15%;
  float: left;
}

#content {
  background-color: blue;
  width: 70%;
  float: right;
}

footer {
  background-color: magenta;
  clear: both;
}

<div id="container">
  <section id="intro">...</section>
  <div id="content">...</div>
  <aside id="nav">...</aside>
  <footer>...</footer>
</div>