ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML/CSS で安定した 2 列レイアウトを作成するには?
HTML/CSS で安定した 2 列レイアウトを作成するには?
- Linda Hamiltonオリジナル
- 2024-11-20 18:41:17501ブラウズ
HTML/CSS で安定した 2 列のレイアウトを作成する
Web ページをデザインするときは、多くの場合、安定した 2 列のレイアウトを作成する必要があります。レイアウト。ただし、このレイアウトを実現するのは、特にサイズを変更したり境界線を適用したりする場合に困難になる場合があります。この記事では、次の要件に対処する HTML/CSS で安定した 2 列レイアウトを作成するアプローチについて説明します:
-
コンテナ制約:
- 幅は親の 100% に調整する必要があります要素。
- 高さは両方の列が含まれるように調整されます。
- 最小サイズは左の列幅の 2 倍に等しくなります。
-
列の制約(一般):
- 変数高さをコンテンツに合わせて調整します。
- 上端を揃えて並べて配置します。
- いずれかの列に適用される境界線、パディング、またはマージンの影響を受けません。
-
左列制約:
- ピクセル単位の固定絶対幅。
-
右列の制約:
- の残りのスペースを埋めます。コンテナ。
- 幅は、コンテナの幅から左の列の幅を引いたものと同じです。
-
必要な安定性:
- レイアウトなしで最小幅またはそれ以上の幅にサイズ変更可能
解決策:
安定した 2 列レイアウトを実現するには、float プロパティを利用できます。方法は次のとおりです:
-
左の列を左フロートに設定します:
left { width: 200px; float: left; } -
右にオフセットします列:
#right { margin-left: 200px; } -
div を使用して列の後のフロートをクリアします:
<div class="clear"></div>
このソリューションにより、両方のカラムが互いに干渉することなく共存できます。左側の列は固定幅を維持し、右側の列は残りのスペースを埋めます。列に適用される境界線やパディングは、列の位置には影響しません。
実際の例:
<!DOCTYPE html>
<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div>以上がHTML/CSS で安定した 2 列レイアウトを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。