6
  • コンテナ#666にはmargin: 20px; overflow: hidden;.
  • ノード#333にはmargin: 20px 0 0 20px; float: left;.

例、http://jsbin.com/owejal/3/editまたは画像:

ダブルマージン

ただし、意図した結果は次のとおりです。

  • 20px マージンのコンテナー、
  • 間に 20 ピクセルのマージンがありますが、コンテナにはありません。

ここに画像の説明を入力

これは負のパディングを使用して実現できます (つまり、コンテナに があった場合padding: -20px 0 0 -20px) が、そのようなものは存在しません。

追加の要素 ( http://jsbin.com/owejal/4/ ) を使用して目的の結果を得ることができますが、CSS のみのソリューションがあるかどうかを知りたいと思っています。

4

6 に答える 6

5

要素間の間隔だけを気にする場合は、疑似要素を破棄できます。背景のためだけにあります。

http://codepen.io/cimmanon/pen/mucDv

<div class="foo"></div>
<div class="group">
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
</div>
<div class="foo"></div>

CSS:

.group {
  overflow: hidden;
  margin: -10px 0 -10px 10px;
  padding-right: 10px;
  position: relative;
}

.group:before {
  display: block;
  content: '';
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 20px; /* 20px instead of 10px due to padding */
  bottom: 10px;
  left: 10px;
  background: #666;
}

.node {
  width: 100px;
  height: 100px;
  float: left;
  background: #333;
  margin: 10px;
}

.foo {
  height: 20px;
  background: #00f;
  margin: 20px;
}
于 2013-08-16T13:50:24.353 に答える
4

これは少しハックですが、戦略的に配置された疑似要素で上部と左側の余白領域を非表示にするのはどうですか? http://jsfiddle.net/SUJtd/

.foo {height:20px; background:#00f; margin:20px 20px 0;}

.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}

.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
于 2013-08-15T18:44:06.730 に答える
2

追加の HTML タグはありませんが、クラスの変更と疑似要素はありません

おそらくあなたのために働くはずの簡単なトリック： http://jsbin.com/owejal/65/edit

スクリーンショット:

ここに画像の説明を入力

可能なすべてのノード数で動作します:)

<div class="foo"></div>
  <div class="group">
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
  </div>
  <div class="foo2"></div>

CSS:

.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
  height:20px;
  background:#00f;
  border-top:20px solid white;
  margin:20px;
  margin-top:-20px;
}
于 2013-08-16T15:00:52.450 に答える
1

ノードの余白を次のように変更します。

.node { margin: 0 20px 20px 0; }

http://jsbin.com/owejal/52/editを参照してください。これにより、下部に余分なパディングが追加されることに注意してください。ただし、これは簡単に解決できない一般的な問題です。これを解決するさまざまな方法については、 http://css-tricks.com/spacing-the-bottom-of-modules/を参照してください(ただし、提示した場合、これらの解決策はどれも機能しません)。

于 2013-08-15T15:09:49.400 に答える