1

私は次のhtmlを持っています:

<div id="wrapper">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="block"></div>
</div>

現在、インライン要素にはdisplay: inline-block. それらを垂直方向に整列させる必要があります。ブロック要素はdisplay: block.

これにより、次の結果が得られます (最初の画像)。

ここに画像の説明を入力

ピンクの要素 (ブロック) を右側にしたいので、 に設定しようとするfloat: rightと、ブロック要素の幅に対応する右側の余白を残して、他の要素が左にずれてしまいます。何か助けはありますか？

4

2 に答える 2

2

ピンクのブロックを a で包み、そこdivにピンクのブロックをセットしfloat:rightます。

<div id="wrapper">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="wrapper-inner clearfix">
        <div class="block" style="float:right"></div>
    </div>
</div>

この内部ラッパーにコンテンツがある場合は、clearfix クラスを追加できます。これは、フローティング要素が親要素の高さを与えないためです。

    .clearfix:after {
        content:"";
        display:table;
        clear:both;
    }
于 2012-10-22T14:43:53.333 に答える
1

HTML

<div id="wrapper">
    <div class="inline-block"></div><!-- remove the whitespace
 --><div class="inline-block"></div><!-- because inline-blocks
 --><div class="inline-block"></div><!-- dont fully collapse whitespace
 --><div class="block"></div>
</div>

CSS

#wrapper {
  text-align: right; /* moves inline-blocks to the right */
  position: relative; /* to give context for absolute positioning of .block */
}

.inline-block {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #f40;
}

.block {
  display: block;
  width: 30px;
  height: 30px;
  background: blue;
  position: absolute;
  right: 0; /* move the block to the far right of #wrapper */
}

例: http://jsbin.com/etuxab/2/edit

于 2012-10-22T14:59:27.997 に答える