垂直並排放置導航塊

Question

我有一些動態大小的導航與固定大小的寬度：25％;在100％的頁面寬度。

<nav class="football fig1"> 
    <header>Header</header> 
    <article> 
     <h3>P1</h3> 
     <img src=""> 
     <p>This is a first News</p> 
    </article> 
</nav> 

你可以看到我的代碼here。

1. 由於nav的動態長度，P1和P4之間有一些空格。請幫助我用css刪除所有塊的主題。

2. 還有什麼問題的代碼，4塊不連續？！

Answer 1

你不能跨裝修4個格的原因是因爲你的顯示設置爲inline-block。這會在您不受控制的元素之間創建一些填充。替換與一個浮子和所有解決：

nav { 
    display: block;   <--this changed from inline-block 
    float: left;    <--this line added 
    vertical-align: top; 
    margin-bottom: 4px; 
    overflow: hidden; 
    box-shadow: 0 0 2px #888; 
} 

現在的div是硬靠在彼此，消耗的寬度正好100％。如果你想有一個保證金之間，您將需要因素在，即：

nav { 
    display: block;    
    float: left;    
    vertical-align: top; 
    margin-bottom: 4px; 
    overflow: hidden; 
    box-shadow: 0 0 2px #888; 
    margin-left: 0.5%; 
    margin-right: 0.5%; 
} 

自從我加入了保證金的1％，你將寬度調整至24％進行補償。如果您不想在左右兩側留出半邊距，則必須使用:last僞類來創意，或向其添加最後一列類。

至於問題的其他部分，我懷疑，除非你重組你的代碼，他們總是排隊在頂部（我可能是錯的）。如果你知道，總會有你可以通過重新排序的div打擊這種4跨越：

<div class='container-col'> 
    <div id='col1'></div> 
    <div id='col5'></div> 
</div> 

<div class='container-col'> 
    <div id='col2'></div> 
    <div id='col6'></div> 
</div> 

<div class='container-col'> 
    <div id='col3'></div> 
    <div id='col7'></div> 
</div> 

<div class='container-col'> 
    <div id='col4'></div> 
    <div id='col8'></div> 
</div> 

CSS：

.container-col { 
    float: left; 
} 

所以現在我們有4根立柱浮動並排側，並且divs將在它們之間垂直堆疊而沒有空間。 Here是一個顯示結果的小提琴，它也保留了邊距。