0

3つの列があります（誰かがもっと欲しいかもしれません）

それらの間に30pxの距離が欲しいとしましょう。

つまり、3 つの異なるスタイルを作成する必要があります。

  1. 最初の列:margin-right:15px
  2. センターコラム：margin-right:15px;margin-left:15px;
  3. 最後の列:margin-left:15px;

それほど複雑ではないかもしれませんが、特にエンドユーザーがバックグラウンドを持っていない可能性のあるワードプレスなどで必要な場合は、まったく快適ではありませんHTML.

ここにフィドルがあります。

これを簡単な方法で達成することは可能ですか?

4

4 に答える 4

1

次の2 つのクラスを使用する必要のない、より簡単な解決策 ( jsFiddle ) があります。

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

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

1 つのクラスを使用して、ガター サイズを必要なサイズに設定するだけです。

更新 (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 に答える
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 に答える