Question

我有两个盒子，我的一个盒子在左侧，我的另一个盒子在底部，我怎样才能使这两个盒子在同一行中

我试图向右浮动

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

}

我的html

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


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

Answer 1

使用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>

Answer 2

.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 个答案: