Question

嗨，我在将两个div放在彼此下面时遇到问题。我有一个容器div，它使用display flex居中在页面的中央，并证明内容中心的合理性，因为这是我可以使它工作的唯一方法。然后，我有三个div，一个占据了50％的屏幕，另外两个占据了20％的屏幕，我希望其他两个div位于彼此下方而不是彼此相邻，但无法弄清楚该怎么做。这是我的HTML：

<div id='content'>
    <div id='col1'>
        <p>paragraph 1</p>
    </div>

    <div id='col2'>
        <p>paragraph 2</p>
    </div>

    <div id='col3'>
        <p>paragraph 3</p>
    </div>

</div>

这是我的CSS：

#content {
    display: flex;
    justify-content: center;
}

#col1, #col2 {
    float:left;
    margin-top:5px;
    margin-bottom:5px;
    border-radius:5px;
}

#col1 {
    width:50%;
}

#col2 {
    background: #FCF;
    width: 20%;
    height:250px;
}

#col3 {
    display:block;
    background: orange;
    width:20%;
    height: 250px;
    margin-top:5px;
    margin-bottom:5px;
    border-radius:5px;
}

在此先感谢您的帮助。

Answer 1

如果我没弄错的话，可以将所有内容居中放置

#content {
margin-left: auto;
width:50%;
margin-right: auto;
}

#col1, #col2 {
margin-top:5px;
margin-bottom:5px;
border-radius:5px;
}

#col1 {
background: red;
}

#col2 {
background: #FCF;
width: 20%;
height:250px;
}

#col3 {
background: orange;
width:20%;
height: 250px;
margin-top:5px;
margin-bottom:5px;
border-radius:5px;
}

Div在默认情况下是一个块，因此不要使用display：block和div在默认情况下彼此堆叠。如果要彼此相邻设置2个div，请使用float：left然后

<div style="clear:both"/>

还原其他行为的默认堆栈

祝你好运！：）

Answer 2

将flex-direction:column用于其他两个div，如下所示：

#content {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: solid 1px /* for reference */
}

[id*="col"] {
  border: solid 1px; /* for reference */
  margin: 5px 5px 5px 0px;
  border-radius:5px;
}

#col1 {
  flex-basis: 50%
}

#col2 {
  flex-basis: 20%;
  background: pink
}

#col3 {
  flex-basis: 20%;
  background: orange
}

<div id='content'>

  <div id='col1'>
    <p>paragraph 1</p>
  </div>

  <!-- added new div with flex-direction style -->
  <div style="flex-direction:column">

    <div id='col2'>
      <p>paragraph 2</p>
    </div>

    <div id='col3'>
      <p>paragraph 3</p>
    </div>

  </div>

</div>

如何使用CSS将两个div放在彼此的下面

2 个答案: