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。

由于导航的动态长度，P1和P4之间存在一些空白。请帮我用css删除所有块的主题。
另外4个块没有连续的代码有什么问题？！

Answer 1

您不适合 4个div的原因是因为您的显示设置为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个垂直列并排浮动，div将堆叠起来，垂直之间没有空格。 Here是显示结果的小提琴，它也保留了边距。

垂直并排放置导航块

1 个答案: