我试图从上到下连续显示营并填满整个宽度。我也试图让每个营的8个站点填满每个营的全部宽度和高度。我将在每个营共有5个营和8个站。
看看到目前为止我在小提琴中的表现：css fiddle
CSS：
<style>
* { margin: 5; padding: 5; }
body { text-transform: uppercase; }
#county { width: 1200px; margin: 20px auto; background: red; }
#battallion { }
.battallions {
height: 300px;
width: auto;
margin: 5px 1px 5px 1px;
background: #eee;
text-align: center;
font: bold 8px;
margin: 10px 5px 10px 5px;
padding: 2px 2px;
border: 2px solid black; }
#station9 { /*display: inline; font: 14px; overflow: hidden; resize: none;*/ }
#station13 { /*display: inline;*/ }
.stations {
/*position: relative;*/
display: inline-block;
/*left: 5px; */
height: 12%;
width: 11%;
margin: 10px 5px 10px 5px;
padding: 0;
border: 2px solid black;
background: powderblue;
font: 8px;
color: black;
/*text-align: left;*/ }
</style>
HTML：
<div id="county">
My County
<div id="battallion5" class="battallions">
Battallion 5<br/>
<div id="station9" class="stations">
Hyattestown
</div>
<div id="station13" class="stations">
Damascus
</div>
<div id="station14" class="stations">
Poolsville
</div>
<div id="station17" class="stations">
Laytonsville
</div>
<div id="station22" class="stations">
Kingsview
</div>
<div id="station29" class="stations">
Germantown
</div>
<div id="station34" class="stations">
Milestone
</div>
<div id="station35" class="stations">
Clarksberg
</div>
<div>
<br/>
<div id="battallion4" class="battallions">
Battallion 4</br>
<div id="station5" class="stations">
Kensington 5
</div>
<div id="stationR2" class="stations">
Rescue 2
</div>
<div id="station4" class="stations">
Sandy Spring 4
</div>
<div id="station40" class="stations">
Sandy Spring 40
</div>
<div id="station25" class="stations">
Kensington 25
</div>
<div id="station18" class="stations">
Glenmont 18
</div>
<div id="stationxx" class="stations">
---
</div>
<div id="stationyy" class="stations">
---
</div>
<div>