Question

我们有3列（有人可能想要更多）

假设我想要它们之间的距离为30px。

这意味着我需要创建3种不同的风格：

第一栏：margin-right:15px
中心栏：margin-right:15px;margin-left:15px;
上一栏：margin-left:15px;

也许它不是很复杂，但它非常不舒服，特别是当某些wordpress等需要时，最终用户可能没有HTML背景。

这是fiddle。

是否有可能以简单的方式实现这一目标？

Answer 1

你可以

HTML

<div class="margin-right">
<div class="margin-left margin-right">
<div class="margin-left">

CSS

.margin-left { margin-left: 15px }
.margin-right { margin-right: 15px }

Answer 2

有一个更简单的解决方案（jsFiddle），不需要你使用2个类：

.col-gutter {
  padding-right: 20px;
}

.col-gutter:last-of-type {
  padding-right: 0;
}

您可以使用一个单独的类

将装订线尺寸设置为您需要的任何尺寸

更新（IE8）

如果你想支持至少IE8，你可以改用它：

.col-gutter {
  padding-left: 20px;
}

.col-gutter:first-child {
  padding-left: 0;
}

Answer 3

您始终可以使用以下方法（针对3列布局）：

.onethird {
     width: 30%;
     margin-left: 5%;
     float: left;
}
.onethird:first-child {
    float: left;
    margin-left: 0;
}
.onethird.third {
    float: right;
}

将其包装在容器中，并确保清除浮子。

以下是对小提琴的更新：http://jsfiddle.net/kFeFj/23/

Answer 4

尝试容器元素上的负边距

http://jsfiddle.net/5JZGt/（此演示显示多个框）

一些HTML：

<div class="container">
    <div class="child">

    </div>

    <div class="child">

    </div>

    <div class="child">

    </div>
</div>

CSS：

.container {
    margin: -10px 0 0 -10px;
}

.container .child {
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px 0 0 10px;
    float: left;
}

您可以取消.child课程，只需参考div或您正在使用的任何元素。

在列之间设置边距

4 个答案: