0

この例で中央の単語(赤い背景smiley) の直後に (黄色の背景)を配置するにはどうすればよいですか?Peter

4

4 に答える 4

1

プロパティを指定.nameするposition: relativeと、絶対配置された疑似要素を宣言できます。

.name:after {
  position: absolute;
  left: 100%;
  background: yellow;
  content: ': )'; /* the space is non-braking */
}

http://jsbin.com/urodit/20/edit

于 2013-01-02T17:20:30.443 に答える
0

これは醜い解決策です。width右に浮かんでいる要素をいじる必要があるため、これは良い解決策ではありません。また、html の中央に配置された要素の前に、中央に配置された要素の右側にある要素を配置する必要があります。

誰かがよりクリーンなソリューションを投稿できる場合は、この回答ではなくその回答を受け入れます。

于 2013-01-03T20:46:11.913 に答える
0

これを確認してくださいhttp://jsbin.com/urodit/30/edit
追加さ.container-one { text-align: center; }れ.name { display: inline-block; }、名前を中央に配置します。次に.description { display: inline-block; }、名前の後に移動するようにします。.name { margin: auto; }こちらも必要なくなったので削除。と追加しまし.name { text-align: left; }た。前後

の HTML コメントに注意してください。.name.description

<div class="container-one">
    <div class="toggle-me">|Toggle|</div>
    <div class="name">Peter</div><!--
 --><div class="description">: )</div>
</div>

これは、コード自体の改行とインデントによって発生する、インライン ブロック要素間の空白を削除するためです。空白を削除したくない場合は、HTML コメントを削除してください。

于 2013-01-02T19:27:55.670 に答える