html - CSS 在 div 内对齐 div

Question

我正在尝试从上到下连续显示营并填满整个宽度。我还试图让每个营的8个站位填满每个营的整个宽度和高度。我一共5个营，每个营8个站。

看看我目前在 fiddle 中有什么: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>

Answer 1

你错过了 </div>我还修好了 40 号站的路线 https://jsfiddle.net/dz5cvkwf/3/