我怎样才能让我的两个盒子在同一行？ [复制]答案

【问题标题】：How can i make my two boxes in the same row? [duplicate]我怎样才能让我的两个盒子在同一行？ [复制]
【发布时间】：2019-06-30 02:43:24
【问题描述】：

我有两个盒子，一个在左侧，另一个在底部，如何让这两个盒子在同一行中

我试图向右浮动

.box2{
  width: 280px;
  height: 250px;  
  padding: 10px;
  background-color: white;

}

我的 html

<div class="box2">
</div>


<div class="box2">
</div>

【问题讨论】：

display: inline 应该可以解决问题......但我不确定这就是我不写完整答案的原因。正如divs 通常使用全宽。 (display: block)

标签： html css

【解决方案1】：

.flex-parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: red;
  margin: 20px;
  padding: 20px;
}

<div class="flex-parent">
  <div class="box">Box 1</div>

  <div class="box">Box 2</div>
</div>

您可以尝试一些 flex-box https://codepen.io/krullmizter/pen/xMXWrv 在盒子周围添加一个父容器并用它来弯曲它们。

【讨论】：

【解决方案2】：

使用 display:inline;两个 div 的风格

.box1 {
  width: 1005px;
  height: 1000px;  
  padding: 50px;
  border: 1px solid red;
  margin-left: 162px;
  background-color: blue;
}

.box2{
  width: 280px;
  height: 250px;  
  padding: 10px;
  background-color: red;

}
.box1, .box2
{
    display:inline;
     text-align:center;
}

<div class="box1">
</div>


<div class="box2">
</div>

【讨论】：

damit... 我也是这么说的（因为我不确定我是否正确，所以我将我的回答作为评论）并且你已经击败了我大约 30 秒 :(