html - 获得 25% 宽度的 div 并排放置并边缘到容器 div 的边缘

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 是否可以帮助实现 margin-left: -30px;在一个和一个 padding-left: 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;
}

请注意，我从 .client-list-container 中删除了 width: 100% 属性。

作为引用，您可以将代码片段放入 jsFiddle 中，以便人们更轻松地帮助您。这是 jsFiddle 中的工作解决方案 http://jsfiddle.net/6vcs51pd/