1

次の例を考えてみましょう。

http://jsfiddle.net/swLyX/

次の HTML を使用すると、次のようになります。

<div id="container">
  <p> Some text aligned the same as the below set of images
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <p> And some other text
</div>

そしてCSS：

#container {
    width: 299px;
    background-color: #c55;
}
.inner {
    float: left;
    margin: 20px 40px 20px 0;
    width: 60px;
    height: 60px;
    background-color: black;
}
p{
    clear: both;
}

当面の問題は、2 番目の div の右側にある大きな空きスペースです。これは、3 番目の div の余白が次の行に移動するためです。

いくつかのテキストを含む 1 つの赤い div と、他の要素を離すために上、左、下に余白を付けて左に浮いた 3 つの小さな div があります。実際の設定では、赤い div がブログ投稿のコンテナーであり、他のコンテンツに対して余白を調整し、3 つの黒い div が画像であると想像してください。

重要なことは、テキストと最初の黒い div の両方を左に水平方向に揃える必要があるということです。div 間のマージンのサイズを変更したり、要素の配置を壊したりせずに、3 番目の div の右マージンを 2 行目にスローしないようにする方法はありますか?

4

2 に答える 2

2

任意の数の項目を任意の数の親コンテナーの幅に対応させることが目標である場合、CSS だけでは、「最も右の」要素が何であるかを把握する簡単な方法はありません。

私が提案することはこれです：

http://jsbin.com/uvegef/1/edit

html:

<div id="outerWrapper">
  <div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

CSS:

#outerWrapper {
  background: pink;
  width: 89px;
  overflow: hidden;
}

#wrapper {
  width: 110%;
}

.item {
  float: left;
  background: blue;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
}

上記の例には、89px の外側の親ラッパーがあります。これは、3 つのアイテムとその余白を合わせるのに必要な 90px に対して 1px 不足しています。

アイデアは、ラッパーにオーバーフローを与えてから、親よりも幅が広いhidden内側のラッパーを追加して、「余分な右マージン」を受け入れることです。状況に応じて調整してください。

于 2012-12-07T22:35:45.417 に答える
0

:last-of-type 疑似要素を使用できます。これを CSS に追加します。

.inner:last-of-type {
    margin-right: 0;
}

ここを参照してください：http://jsfiddle.net/swLyX/5/

于 2012-12-07T22:35:08.030 に答える