質問
図に示すように、この効果を実現するにはどうすればよいでしょうか?
- 行の両端に表示されるブレッドクラムとボタン
- パンくずリストやエディットバーが幅を超える場合は自動的に分けて表示されます
達成
フロートを使用し、緑のブロックは左に、青のブロックは右にフローティングし、幅が他の行の表示を超えるようなダイナミックな効果を実現します。
フローティングを使用すると、要素が標準フローから抜け出し、左または右に移動して親要素の残りのスペースを占有することができます。フローティング要素は他の要素のレイアウトに影響を与えませんが、幅と高さが設定された新しいブロックレベルのボックスを作成します。
フローティング要素の特徴は次のとおりです。
- 浮遊要素は標準流量から外れます (適応外)。
- フローティング要素は 1 行で表示され、要素の上部に揃えられます。
- フローティング要素は、インラインブロック要素のプロパティを持ちます。
沈下が激しい
もちろん、子要素がすべてフローティングになった後は、親 div から離れて、親要素を超えてしまいます (親要素の高さが崩れます)。
どうやって解決すればいいでしょうか？
親 div にクリアフロートを追加しますoverflow: hidden。
overflow: hidden は、要素のコンテンツがコンテナの境界を超えるかどうかを制御するために使用される CSS プロパティです。float をクリアできますが、それはその要素内で float が発生した場合に限られます。
要素に float が含まれる場合、clearfix メソッドなどを使用して float をクリアしないと、親要素が損傷する可能性があります高度塌陷。この問題を解決するには、親要素に設定してoverflow: hiddenフローティングを解除します。
サンプルコード:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
overflow: hidden; /* 清除浮动 */;
background-color: #666;
}
.childl {
float: left;
}
.childr {
float: right;
}
</style>
</head>
<body>
<div class="parent">
<div class="childl"></div>
<div class="childr"></div>
</div>
</body>
</html>
要約する
フレックスレイアウトは使いやすいですが、他のものを使用した覚えがありません。実は各属性には使用シナリオがあり、当初は flex レイアウトと js の動的判断を使用して解決しようと考えていましたが、フローティング 3 行のコードを使用すると簡単に解決できました。
