ホームページ >ウェブフロントエンド >htmlチュートリアル >2つのdivを水平に配置するにはどうすればよいですか? _html/css_WEB-ITnose
2つのdivを水平に配置するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:42:241539ブラウズ
div2 が 2 行目の左端にないのはなぜですか? ?
私のページは次のとおりです:
現在のエフェクトは
div1 div1label
div2 div2label です
私が望むエフェクトは次のとおりです:
div1 div1label
div2 div2label
変更するには? ?
私のページは次のとおりです:
<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 つの項目でカバーできない問題がある可能性があります。
また、コードを記述する際に、形式が正しくない場合は、作者がインデントに注意することをお勧めします。自分自身や他の人にとってそれらを見つけるのは困難です
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。