html - 2 div 在另一个 div 内但在文本之下

Question

我有一个内容 div，里面有一些文本，内容 div 中有 2 个 div 并排放置。

我希望 2 个子 div 并排显示，但在文本下方，而不是在文本旁边。

body {
  text-align: center;
}
#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  display: flex;
  clear: both;
}
#second {
  background-color: yellow;
  padding-bottom: 500px;
  width: 100px;
  display: inline;
  position: relative;
}
#first {
  background-color: palegoldenrod;
  padding-bottom: 500px;
  width: 400px;
  display: inline;
  position: relative;
}

<div id="content">div id="content"
  <div id="second">div id="second"</div>
  <div id="first">div id="first"</div>
</div>

这是一个 Jsfiddle现在的样子。

Answer 1

查看更新的 JSFiddle

#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  clear: both;
}
#second {
    background-color: yellow;
    padding-bottom: 500px;
    width: 100px;
    position: relative;
    float: right;
}
#first {
    background-color: palegoldenrod;
    padding-bottom: 500px;
    width: 400px;
    position: relative;
    float: left;
}

#content::after {
    content: "";
    clear: both;
    display: block;
}

Demo