并排放置两个分区

Question

我试图将我的两个div并排放在一起：但是他们下面的div会向上微笑。看起来像这样：

这是我的HTML：

<div class="DSL6">
<h3 class="DSLLocation">DSL 6</h3>
</div>
<div class="DSLInformation">
</div>
<div class="FTTN10">
<h3 class="FTTNLocation">FTTN 10</h3>
</div>
<div class="FTTN15">
<h3 class="FTTNLocation">FTTN 15</h3>
</div>
<div class="FTTN25">
<h3 class="FTTNLocation">FTTN 25</h3>
</div>
<div class="FTTN50">
<h3 class="FTTNLocation">FTTN 50</h3>
</div>

和CSS：

.DSL6 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  margin-top: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
  float: left;
  clear;
}
.DSLLocation {
  margin-top: 60px;
}
.DSLInformation {
  width: 850px;
  height: 150px;
  background-color: black;
  float: left;

}
.FTTNLocation {
  margin-top: 60px;
}
.FTTN10 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN15 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN25 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN50 {
  background-color: #dbdbdb;
  width: 250px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
}

我环顾四周，我尝试了不同的答案（在其他网站和Stack Overflow上），但是唉，没有发现任何问题。

我想要的是什么：

Answer 1

您获得此结果是因为您所有div的总宽度大于屏幕宽度。看到我修改过的css，这里的所有div都是内联的。另一个是你应该使用float: left来显示内联div。

＆＃13;

＆＃13;

.wrapper{
  width: 500px;
}
.DSL6 {
  background-color: #dbdbdb;
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  border-color: #D3D3D3;
  float: left;
  display: inline;
}
.DSLLocation {
  margin-top: 60px;
}
.DSLInformation {
  width: 300px;
  height: 150px;
  background-color: black;
  float: left;
  display: inline;
  border-style: solid;
  border-width: 1px;
  border-color: black;  

}
.FTTNLocation {
  margin-top: 60px;
}
.FTTN10 {
  background-color: #dbdbdb;
  width: 150px;
  height: 150px;
  border-style: solid;
  float: left;
  display: inline;
  border-width: 1px;
  border-color: #D3D3D3;
}
.FTTN15 {
  background-color: #dbdbdb;
  width: 50px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  display: inline;
  float: left;
  border-color: #D3D3D3;
}
.FTTN25 {
  background-color: #dbdbdb;
  width: 50px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  display: inline;
  float: left;
  border-color: #D3D3D3;
}
.FTTN50 {
  float: left;
  background-color: #dbdbdb;
  width: 50px;
  height: 150px;
  border-style: solid;
  border-width: 1px;
  display: inline;
  border-color: #D3D3D3;
}

＆＃13;

<div class="wrapper">
<div class="DSL6">
<h3 class="DSLLocation">DSL 6</h3>
</div>
<div class="DSLInformation">
</div>  
<div class="FTTN10">
<h3 class="FTTNLocation">FTTN 10</h3>
</div>
<div class="DSLInformation">
</div>   
</div>

＆＃13;

＆＃13;

＆＃13;

编辑摘要

编辑html作为OP的要求。