2つのdivを水平に配置するにはどうすればよいですか? _html/css

2つのdivを水平に配置するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:42:24

オリジナル

1494 人が閲覧しました

この投稿は、whoamiwho によって最終編集されました (2013-03-24 21:07:55)

div2 が 2 行目の左端にないのはなぜですか? ?

私のページは次のとおりです:

   <div>   <div style="width: 100px; height: 100px; float: left">div1</div>    <label>div1label</label>   </div>      <div>    <div style="width: 100px; height: 100px; float: left">div2</div>        <label>div2label</label>      </div>

ログイン後にコピー

現在のエフェクトは
div1 div1label
div2 div2label です
私が望むエフェクトは次のとおりです:
div1 div1label
div2 div2label
変更するには? ?

ディスカッションへの返信 (解決策)

Clear 属性は、要素のどちら側にフローティング要素を含めることが許可されないかを定義します。 DIV が小さすぎます。

これが発生した場合は、これら 2 つの DIV の親要素が小さすぎる可能性があります。

投稿者が提供したクリップには何も問題はありません。完全なコードを指定する必要があります。親要素を一度に 1 レベルずつ確認してください。

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title></head><body>	<div style="overflow:hidden;">		<div style="width: 100px; height: 100px; float: left">div1</div>		<label>div1label</label>	</div>	<div>		<div style="width: 100px; height: 100px; float: left">div2</div>		<label>div2label</label>	</div></body></html>

ログイン後にコピー

ここが鍵です。前の div の float をクリアする必要があります。そうしないと、レイアウトに問題が発生しやすくなります

正解は 2 階、クリアですfloat では、絶対位置も指定できます

    <div>        <div style="width: 50px; height: 100px; float: left">            div1</div>        <label>            div1label</label>    </div>    <div style="clear: left">        <div style="width: 50px; height: 100px; float: left" >            div2</div>        <label>            div2label</label>    </div>

ログイン後にコピー

効果は次のとおりです:

コードは 1 行だけ追加されます。 float を使用する要素はドキュメントから分離されるため、外枠の div には外枠をサポートする Clear 属性を持つ要素を使用する必要があります。表示がブロックされます。 1 つの項目でカバーできない問題がある可能性があります。

また、コードを記述する際に、形式が正しくない場合は、作者がインデントに注意することをお勧めします。自分自身や他の人にとってそれらを見つけるのは困難です