以正确的格式对齐3 div

Question

我需要3个div，如下所示：Div 3位于Div 1和Div 2下方

我尝试过以下代码

<div style="float:left;width: 47%;padding-left: 32px; margin-top: -49px;">DIV 1</div>
<div style="float:left;width: 47%;padding-left: 32px; margin-top: -49px;">Div2</div>
<div style="width: 47%;padding-left: 32px; margin-top: -49px;">DIV 3</div>

Answer 1

您可以通过使元素内联块而不是浮动它们来实现此目的：

.wrapper {
  display: inline-block;
  text-align: center;
  border: 1px solid red
}
.wrapper > div {
  display: inline-block;
  width: 47%;
  /* not sure what this padding or margin was for so I just left them in as they are on your original divs */
  padding-left: 32px;
  margin-top: -49px;
  box-sizing: border-box;
  border: 1px solid red
}

<div class="wrapper">
  <div>DIV 1</div>
  <div>Div 2</div>
  <div>DIV 3</div>
</div>

Answer 2

您可以使用（flexbox）。在小屏幕上更好。

＆＃13;

＆＃13;

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;

}

.grow{
      flex-grow:1;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

＆＃13;

<ul class="flex-container">
  <li class="flex-item grow">1</li>
  <li class="flex-item grow">2</li>

</ul>
 <ul class="flex-container">
  <li class="flex-item">3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;