Question

您好我试图让这些<divs>坐在包含（内部）<div>内，其想法是最多4 <divs>在一行中有一个双边框（1px实体）和div之间的边距为30px，同时第一个和最后一个坐在内部div的边缘。

这是我已经完成的代码，但我似乎无法按照设计需要的方式获得保证金。

<div class="client-list-container clearfix">
    <div class="client-logo-container">
        <div class="logo-container">
            <div class="client-logo">
                <div class="logo">
                    <p>Client Logo</p>
                </div>  <!-- logo div ends -->
            </div> <!-- client logo div ends -->
        </div> <!-- logo container div ends -->
    </div> <!-- client logo container div ends -->

我有6个以相同的方式重复，第一个div（client-list-container clearfix）在第6个之后关闭。

这是我使用的CSS，是的，我有一个空的，但那是因为我试图看看另一个div是否可以帮助我做一个保证金左边的想法：-30px;在一个和一个填充左：30px;可能会解决问题，但没有成功。

.client-list-container {
    width: 100%;
}

.client-logo-container {
    width: 25%;
    float: left;    
}

.logo-container {
}

.client-logo{
    border: 1px solid #9bb8be;
    margin-bottom: 30px;
 }

.logo{
    border: 1px solid #9bb8be;
    margin: 4px;
    text-align: center;
    padding: 60px 48px;
}

之前未在此处发布，因此不确定我是否已尽可能以最佳方式发布此内容，如果未以最佳方式发布，请抱歉。

Answer 1

您的负余量+填充想法非常接近，但有一点要记住，默认box-sizing属性为content-box。这意味着元素的总宽度由填充的宽度加上组成。所以你的元素实际上是25％+ 30px宽，使它们比100％宽。所以你想要的是border-box，如果你将宽度设置为25％，那么这包括该宽度的填充。

例如，这应该有效：

.client-list-container {
    margin-left: -30px;
}

.client-logo-container {
    width: 25%;
    float: left;
    padding-left: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

请注意，我从width: 100%取消了.client-list-container媒体资源。

作为参考，您可以将代码片段放入jsFiddle中，以方便人们帮助您。这是jsFiddle http://jsfiddle.net/6vcs51pd/

中的工作解决方案

获得25％宽度divs并排坐在容器div的边缘到边缘

1 个答案: