36

次の jsFiddle を検討してください: http://jsfiddle.net/mark69_fnd/yqdJG/1/

HTML:

<div id="container">
    <div class="char">
        AAA
    </div>
    <div class="char stickToRight">
        BBB
    </div>
</div>​

CSS:

#container {
    border:solid 2px green
}
.char { 
    display: inline-block;
    border: solid 2px red;
}
.stickToRight {
    float: right
}​

フローティングせず.stickToRightに正しく整列させる別の方法はありますか?

垂直方向の配置を他の要素display:inline-blockと一致させることができるように、そのままにしておく必要があります。.char

float:right要素を維持しながら、右揃えの効果を達成するにはどうすればよいdisplay:inline-blockですか? (コンテナ要素の幅がわからないことに注意してください。)

もしあれば、純粋に CSS ソリューションが欲しいです。

4

7 に答える 7

16

inline-block要素を同時にフローティングすることはできません。

要素が に設定されている場合、幅と高さを指定できるというinline-block点で要素とは異なります。display:inlineただし、これは依然としてインライン レイアウト フローの一部です。水平方向の位置はソースの順序とtext-alignブロック レベルの親のプロパティによって決定され、ラインとの垂直方向の位置はvertical-alignプロパティによって決定されます。

要素がフローティングされると、インライン レイアウト フローの一部ではなくなります。その水平方向の位置は、それがフロートされているか であるleftか、その前に他のフロートされている要素があるかどうかによって決定され、垂直方向の位置は、Eric MeyerがCSSrightで非常によく説明しているかなり複雑な一連のルールによって決定されます。 「フロートされていなければ表示されるインラインボックスの上部」に煮詰めます。

要素をフローティングさせたいinline-blockと同時に、どのような視覚効果を想像しているのかはまだよくわかりませんが、フロート レイアウトはinline-block、水平位置と垂直位置の両方の点でレイアウトとは異なります。それらを組み合わせる方法はありません。

于 2012-11-10T14:16:23.560 に答える