Html 2个div位于另一个div内但在text下

我有一个内容div，里面有一些文本，内容div里面有两个div，两个div相邻放置

我希望两个子div彼此相邻显示，但显示在文本下，而不是文本旁边

正文{
文本对齐：居中；
}
#第一，第二{
边框：纯绿2px；
}
#内容{
边框：纯紫色2件；
显示器：flex；
明确：两者皆有；
}
#第二{
背景颜色：黄色；
填充底部：500px；
宽度：100px；
显示：内联；
位置：相对位置；
}
#首先{
背景颜色：淡黄花；
填充底部：500px；
宽度：400px；
显示：内联；
位置：相对位置；
}

div id=“content”
div id=“第二个”
div id=“第一”

参见更新的

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;
}

---

我的第一个想法是包装第二个和第一个div，并将content div上的flex direction更改为column。（我去掉了你的填充物：500px，因为我不知道这是为了什么。）

#第一，第二{
边框：纯绿2px；
}
#内容{
边框：纯紫色2件；
显示器：flex；
弯曲方向：立柱；
明确：两者皆有；
}
#第二{
背景颜色：黄色；
宽度：100px；
显示：内联；
位置：相对位置；
弹性：1；
}
#首先{
背景颜色：淡黄花；
宽度：400px；
显示：内联；
位置：相对位置；
弹性：1；
}
.主要内容{
显示器：flex；
}

div id=“内容”
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”

您可以将两个div放在另一个div中，如下所示：

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

---

谢谢，这就是我要找的，#content：：after到底是做什么的？欢迎您，它是do

clear:two

，因为当您使用

float

时，您需要使用

clear

但他也添加了一个新的div.）这两种方法都能很好地满足您的要求。干杯

#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  display: block;
  clear: both;
}
#twoboxes{
  display: flex;
}
#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;
}