web-dev-qa-db-ja.com

ページの次の行に何かを移動させるCSSは何ですか？

ページの新しい行に要素を自動的に配置するにはどうすればよいですか？ HTMLでは<br>を使用できますが、CSSでline-breakのようなものを追加するにはどうすればよいですか？

たとえば、次のコードがあるとします。

<p>Lorem ipsum dolor sit amet,
   <span id="elementId">consectetur adipisicing elit.</span>
   Magni totam velit ex delectus fuga fugit</p>

スパンは、残りのテキストと同じ行に配置されたままです。 CSSを介して純粋に新しい行のスパンテキストを移動するにはどうすればよいですか？

別の例は、display: inline-blockまたはfloatを使用する場合です。

<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>
<div class="smalldiv" id="elementId">Lorem ipsum dolor sit amet</div>
<div class="smalldiv">Lorem ipsum dolor sit amet</div>

.smalldiv {
    display: inline-block; // OR
    float: left;
}

新しい行で<div>sの1つを移動して新しい行を作成するにはどうすればよいですか？

csspositioning
36
Justin Meltzer

考えられる選択肢は2つありますが、詳細がなければ、どちらが優れているかはわかりません。

#elementId {
    display: block;
}

これにより、要素は強制的に「新しい行」になりますifフロート要素と同じ行にありません。

#elementId {
     clear: both;
}

これにより、要素がフロートをクリアし、「新しい行」に移動します。

要素がposition of fixedまたはabsoluteを持つ別の行と同じ行にある場合、私が知っている限り、「新しい行」を強制することはありませんドキュメントの通常のフローから要素が削除されます。

73
David Thomas

要素をブロックとして表示します。

display: block;
7
Mårten Wikström

そもそも何かが同じ行にある理由によって異なります。

clearはfloatの場合、display: blockインラインコンテンツが自然に流れる場合、何も無効になりませんposition: absolute前の要素は、それによって通常のフローから取り出されます。

4
Quentin