0

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

可以说我想要它们之间的 30px 距离。

这意味着我需要创建 3 种不同的样式：

  1. 第一栏：margin-right:15px
  2. 中心柱：margin-right:15px;margin-left:15px;
  3. 最后一栏：margin-left:15px;

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

这是一个小提琴。

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

4

4 回答 4

1

在容器元素上尝试负边距

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您正在使用的元素或任何元素。

于 2012-12-11T22:20:53.980 回答
1

有一个更简单的解决方案（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;
}
于 2012-12-11T21:49:15.300 回答
1

您始终可以使用以下方法（对于 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/

于 2012-12-11T22:05:00.093 回答
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 }
于 2012-12-11T21:41:08.170 回答