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

Question

这个问题已经在这里有一个答案：

• How to place div side by side 7个回答

我有两个箱子我一个盒子都在左侧，我的另一箱是在底部我怎么能在同一行中让这些两个箱

我试图向右浮动

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

}

我的html

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


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

Answer 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以及添加父容器周围的箱子，并用它弯曲他们。

Answer 2

使用显示：内联;在风格上两者的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>