html - 并排放置两个 Div

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。

.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;
}

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

编辑摘要

根据 OP 的要求编辑 html。