Question

我有一个内容div，里面有一些文本，内容div里面有两个div，彼此相邻。

我希望2个子div显示在彼此旁边，但在文本下面，而不是在它旁边。

＆＃13;

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

＆＃13;

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

＆＃13;

这是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

Answer 2

您可以将两个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>

并在您的CSS中将属性display设置为flex。这是CSS：

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

Answer 3

我的第一个想法是包装你的第二个和第一个div并将内容div的flex-direction更改为列。（我删除了你的填充：500px因为我不知道它的目的是什么。）

#first, #second {
  border: solid green 2px;
}
#content {
  border: solid purple 2px;
  display: flex;
  flex-direction: column;
  clear: both;
}
#second {
  background-color: yellow;
  width: 100px;
  display: inline;
  position: relative;
  flex: 1;
}
#first {
  background-color: palegoldenrod;
  width: 400px;
  display: inline;
  position: relative;
  flex: 1;
}

.main_content {
  display: flex;  
}

<div id="content">
div id="content"
<div class="main_content" >
  <div id="second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <div id="first">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  </div> 
</div>

2 div在另一个div内，但在文本下

3 个答案: