html - 垂直并排放置导航 block

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. 由于导航的动态长度，P1 和 P4 之间有一些空白。请帮我用 css 删除所有 block 的主题。

2. 另外4个block不在一行的代码有什么问题？!

Answer 1

您不适合 4 个 div 的原因 是因为您的显示设置是 inline-block。这会在您无法控制的元素之间创建一些填充。将其替换为 float ，一切都解决了:

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% 的宽度。如果你想在你之间有一个 margin ，你需要考虑到这一点，即:

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 伪类来发挥创意，或者向它添加一个 last-column 类。

至于问题的另一部分，我怀疑除非您重构代码，否则它们将始终排在顶部(我可能是错的)。如果您知道总有 4 个横跨，您可以通过重新排序 div 来解决这个问题:

<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 个并排 float 的垂直列，div 将垂直堆叠，它们之间没有空间。 Here是一个显示结果的 fiddle ，它也保留了边距。