CSS テーブル、フレックスボックス、グリッドを使用して、2 つの隣り合う Div を同じ高さに保つ

どちらかの div にさらにコンテンツが追加されたときに、両方の div の高さが自動的に一致するように、2 つの並んだ div 要素を同じ高さに保つ必要があります。これにより、列の外観が不均一になるのを防ぐ、一貫したプロフェッショナルなレイアウトが作成されます。

列の高さを等しくするには、いくつかの方法があります。最も効果的な方法を検討します

display: table-cell を使用した CSS テーブル表示自動高さ一致用
CSS Flexbox display: flex を使用した最新のアプローチ
CSS グリッド同じ高さの列のグリッドレイアウト
JavaScript プログラムで一致する高さを設定する

等しい高さの柱の問題 Div 1 詳しい内容はこちら... Div 2 高さが不均一! Div 1 詳しい内容はこちら... Div 2 同じ高さ! Div 1 コンテンツが少ない Div 2 自動マッチング!

CSS テーブル表示の使用

display: table-cell プロパティは、テーブルの同じ行内の要素の高さを自動的に同じにします。これは、最も信頼性の高いクロスブラウザ方式の 1 つです。

例

<!DOCTYPE html>
<html>
<head>
 <title>Equal Height Divs - Table Method</title>
 <style>
 .container {
 display: table;
 width: 100%;
 border-spacing: 10px;
 }
 .box1, .box2 {
 display: table-cell;
 padding: 20px;
 vertical-align: top;
 }
 .box1 {
 background: #e74c3c;
 color: white;
 width: 50%;
 }
 .box2 {
 background: #f39c12;
 color: white;
 width: 50%;
 }
 </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
 <h2>Equal Height Columns with Table Display</h2>
 <div class="container">
 <div class="box1">
 <h3>Column 1</h3>
 <p>This column has more content to demonstrate how both columns automatically adjust to the same height.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </div>
 <div class="box2">
 <h3>Column 2</h3>
 <p>This column has less content but matches the height of the first column.</p>
 </div>
 </div>
</body>
</html>

出力では、コンテンツ量が異なるにもかかわらず、両方の列の高さが同じであることが示されています。

Equal Height Columns with Table Display
Column 1 Column 2
This column has more content to This column has less content but 
demonstrate how both columns matches the height of the first
automatically adjust to the same column.
height.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit...
(Both columns have the same height)

CSS フレックスボックスの使用

フレックスボックスは、同じ高さの列を作成するための最新のアプローチです。 align-items: stretch プロパティ (デフォルト) は、すべてのフレックス項目が同じ高さになるようにします。

例

<!DOCTYPE html>
<html>
<head>
 <title>Equal Height Divs - Flexbox Method</title>
 <style>
 .flex-container {
 display: flex;
 gap: 20px;
 margin: 20px 0;
 }
 .flex-box {
 flex: 1;
 padding: 20px;
 color: white;
 }
 .flex-box1 {
 background: #3498db;
 }
 .flex-box2 {
 background: #2ecc71;
 }
 </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
 <h2>Equal Height Columns with Flexbox</h2>
 <div class="flex-container">
 <div class="flex-box flex-box1">
 <h3>Flex Column 1</h3>
 <p>Flexbox automatically stretches both columns to match the tallest one.</p>
 <p>This approach is more modern and flexible than table display.</p>
 <p>It also supports responsive design easily.</p>
 <p>Additional content here to make this column taller.</p>
 </div>
 <div class="flex-box flex-box2">
 <h3>Flex Column 2</h3>
 <p>This column automatically matches the height of column 1.</p>
 </div>
 </div>
</body>
</html>

フレックスボックスのアプローチにより、レスポンシブな同じ高さの列が作成されます

Equal Height Columns with Flexbox
Flex Column 1 Flex Column 2
Flexbox automatically stretches This column automatically matches
both columns to match the tallest the height of column 1.
one.
This approach is more modern and
flexible than table display.
(Both columns stretch to equal height)

CSS グリッドの使用

CSS グリッドは、grid-template-rows: 1fr を使用した同じ高さの列に対する別の最新のソリューションを提供します。 .

例

<!DOCTYPE html>
<html>
<head>
 <title>Equal Height Divs - Grid Method</title>
 <style>
 .grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
 margin: 20px 0;
 }
 .grid-box {
 padding: 20px;
 color: white;
 }
 .grid-box1 {
 background: #9b59b6;
 }
 .grid-box2 {
 background: #e67e22;
 }
 </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
 <h2>Equal Height Columns with CSS Grid</h2>
 <div class="grid-container">
 <div class="grid-box grid-box1">
 <h3>Grid Column 1</h3>
 <p>CSS Grid creates equal height columns by default when using fractional units.</p>
 <p>This method gives precise control over layout.</p>
 <p>Perfect for complex layouts with multiple rows and columns.</p>
 </div>
 <div class="grid-box grid-box2">
 <h3>Grid Column 2</h3>
 <p>Automatically matches the height of the tallest grid item in the same row.</p>
 </div>
 </div>
</body>
</html>

JavaScript の使用

JavaScript は動的な高さのマッチングを提供します。これは、ページの読み込み後にコンテンツが変更された場合に役立ちます。このメソッドは jQuery を使用します。プログラムで高さを読み取り、設定します。

例

<!DOCTYPE html>
<html>
<head>
 <title>Equal Height Divs - JavaScript Method</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <style>
 .js-container {
 display: flex;
 gap: 20px;
 margin: 20px 0;
 }
 .js-box {
 flex: 1;
 padding: 20px;
 color: white;
 }
 .js-box1 {
 background: #34495e;
 }
 .js-box2 {
 background: #16a085;
 }
 </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
 <h2>Equal Height with JavaScript</h2>
 <div class="js-container">
 <div class="js-box js-box1" id="box1">
 <h3>JavaScript Column 1</h3>
 <p>This method programmatically sets heights to match.</p>
 <p>Useful when content is added dynamically after page load.</p>
 <p>The script finds the tallest element and applies that height to all others.</p>
 </div>
 <div class="js-box js-box2" id="box2">
 <h3>JavaScript Column 2</h3>
 <p>Height is set by JavaScript to match column 1.</p>
 </div>
 </div>
 <button onclick="addContent()" style="padding: 10px; margin: 10px;">Add Content to Column 2</button>
 <script>
 function equalizeHeights() {
 var box1Height = $("#box1").height();
 var box2Height = $("#box2").height();
 var maxHeight = Math.max(box1Height, box2Height);
 $("#box1, #box2").height

CSS テーブル、フレックスボックス、グリッドを使用して、2 つの隣り合う Div を同じ高さに保つ

企業における HTML:誰が使用し、企業がどのように活用するか

WordPress リダイレクトマルウェアを阻止する:スパムリダイレクトのクイックフィックス

トップ 13 WordPress セキュリティプラグイン:専門家による比較とテスト
WordPress セキュリティプラグインは、WordPress ウェブサイトを保護する最も効果的な方法です。価値の高い Web サイトには、Web ホストが提供できる以上のセキュリティが必要であり、セキュリティプラグインがその役割を果たします。そのため、サイトを保護するには適切な選択をすることが重要です。 MalCare Security は、入手できる中で最も効果的なセキュリティプラグインです。私たちは、最も人気のあるトップの 13 個の WP セキュリティプラグインをテストしました。以下のリストには良い点も悪い点も含まれているため、私たちが綿密かつ誠実に推奨しているこ
HTMLでメールを作成し、Gmailを使用して送信する
HTMLメールもメールですが、グラフィック、色、リンク、テーブル列を使用して、Webページと同様にフォーマットされています。ここで、以前にサービスから受け取ったニュースレターを想像してみてください。これは、HTMLメールの外観ですが、プレーンテキストはテキストのみを含むメールです。典型的なオフィス間の電子メール通信を想像してみてください。プレーンテキストのメールは次のようになります。一般に、電子メールマーケターは、どの形式が最適かについて議論しません。 HTMLメールは、常にマーケティングテストのためにより良い方法で変換されます。ただし、使用する電子メール形式を決定する前に考慮しなければな