垂直并排放置导航块

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是一个显示结果的小提琴，它也保留了边距。