我怎样才能把我的两个箱子放在一排？

Question

我有两个盒子，一个盒子在左边，另一个盒子在底部，怎么才能把这两个盒子放在同一行呢？

我试着向右漂

.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

使用display:内联；对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>

​