Question

我正在处理响应式网格，并且我试图在每个分辨率的主要div 的所有四个边上保持边距相同。我已经在主要div上设置了0自动保证金，这使得它在右侧和左侧保持相同但是顶部和底部是什么？

<div id = "wrapper">
<header id = "header"> <p> this is the header</p></header>
<div id = "main">
    <div id = "" class = "col col3">
        <div class = "img-col"><img src = "images/image.png"></div>
        <div class = "text-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero. Fusce id semper orci. Morbi      imperdiet sit amet elit vel consectetur. Nam suscipit sem blandit est consectetur iaculis. Vestibulum sed dolor elementum, viverra sapien id, sollicitudin nibh. Integer quis venenatis ligula.Nam suscipit sem blandit est consectetur iaculis.</p>
        </div>
    </div>

    <div id = "" class = "col col1">
        <div class = "img-col"><img src = "images/image.png"></div>
        <div class = "text-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero. Fusce id semper orci. Morbi imperdiet sit amet elit vel consectetur. Nam suscipit sem blandit est consectetur iaculis.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero.Lorem ipsum dolor sit amet,. </p>
    </div>
    </div> 

</div>

#main { 
    width:90%;
    margin:0 auto;
}

.col { 
    float:left;
    margin: 1% 0px 1% 1.6%;
    background-color:#FF0000;   
}

Answer 1

澄清之后

编辑。

如果#main div周围需要所有四边（顶部/底部/左/右）相同的边距，则必须：

清除浮动内容，使其不会溢出#main上设置的下边距，您可以使用:after的伪元素clear:both;（参见演示）
在margin:10%; div上设置#main。根据容器宽度计算百分比边距，所有四个边距将具有相同的值。

DEMO （带有一些额外的样式，以便您可以看到边距）

这是一个屏幕截图，显示四边的边距值相同：

same margin on all four sides

原始回答：

百分比边距是根据容器宽度计算的，因此如果您在margin:1%;上设置.col，则上边距，右边，下边和左边的边距将相同。

Demo

保持平等边距CSS的最佳方法

1 个答案: