1

我有一些动态大小的导航，宽度固定大小：25%；在 100% 的页面宽度中。

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

你可以在这里看到我的代码。

  1. 由于导航的动态长度，P1 和 P4 之间有一些空格。请帮我用css删除所有块的主题。

  2. 还有4个块不是连续的代码有什么问题？！

4

1 回答 1

0

您不适合 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伪类来获得创意，或者向其添加最后一列类。

至于问题的另一部分，我怀疑除非您重组代码，否则它们将始终排在顶部（我可能是错的）。如果你知道总会有 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 个并排浮动的垂直列，并且 div 将垂直堆叠，它们之间没有空间。这是一个显示结果的小提琴，它也保留了边距。

于 2013-07-15T11:05:13.913 回答