将div放在同一条线上

Question

我试图将这3个浮动的div放在同一条线上。这是jsfiddle的链接：

https://jsfiddle.net/dtps4fw8/2/

有什么建议吗？

HTML：

<div class="content">

    <div class="box">

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

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

    </div>

</div>

CSS：

.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}

Answer 1

请参阅此fiddle

要使3 div居中，首先删除float属性，然后应用浮动效果，使用display:inline-block。 inline-block显示为div提供了文字特征。父div的text-align:center会将这些inline-block元素置于父级内。

按以下方式更新CSS

.box {
  width: 30%;
  height: 200px;
  display: inline-block;
  background: gray;
  border: black solid 2px;
  box-sizing: border;
  margin: 5px;
}

.content {
  text-align: center;
}

Answer 2

首先，float:left;与您的情况无关，就像Lal所说，而不是float:left;它应该是display:inline-block;，您还可以添加相对定位position:relative;

Answer 3

我使用的是flexbox。非常小，反应迅速。

.content {
  width:100%;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;}

.box {
  height: 200px;
  flex:1;
  background: gray;
  border: black solid 2px;
  box-sizing: border;
  margin: 5px;}