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

Question

嗨，我正在尝试让这些 <divs> 位于包含（内部）<div> 内，我的想法是最多有 4 个 <divs>在具有双边框（1px 实心）和 div 之间的 30px 边距的行中，同时第一个和最后一个坐在内部 div.[=16 的边缘=]

这是我完成的代码，但我似乎无法让余量按照设计需要的方式工作。

<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;在一个和一个 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/

中的工作解决方案

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

getting 25% width divs to sit side by side and edge to edge of container div

html

css

wordpress