資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學建立兩列布局，同時保持列背景顏色全尺寸
在兩列布局中，內容被組織成兩列等寬的列。但是，確保每列的背景顏色填充內容的整個高度可能是一個挑戰，尤其是在每列的內容長度不同時。
CSS 網格是建立具有多列的響應式佈局的另一種選擇。較舊的佈局方法，例如浮動和基於表格的佈局，也可以使用，但不推薦，因為它們有侷限性和缺乏靈活性。
演算法
定義一個包裝類，其 display 屬性設定為 flex。這將為兩列建立一個 flex 容器。
定義左列類，其 flex-grow 屬性設定為 1。這將使左列填充容器中的可用空間。另外，設定左列的背景顏色。
定義右列類，其 flex-grow 屬性設定為 1。這將使右列填充容器中的可用空間。另外，設定右列的背景顏色。
將左列內容和右列內容新增到包裝元素中。
最終結果是一個兩列等寬的佈局，左列為紅色 (#e62626)，右列為較深的紅色 (#864f4f)。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Column Layout</title>
<!------------------------- CSS ---------------------------->
<style>
/* Define a flex container with the wrapper class */
.wrapper {
display: flex;
}
/* Define the left column with flex-grow set to 1 to fill the available space, and set the background color */
.left-column {
flex: 1;
background-color: #e62626;
}
/* Define the right column with flex-grow set to 1 to fill the available space, and set the background color */
.right-column {
flex: 1;
background-color: #864f4f;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left-column">
<!-- content for the left column -->
<h1>Left column</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum dolorem ab magni rerum. Molestiae facere libero ut magnam, accusamus id voluptas eligendi officiis a harum eaque, autem obcaecati? Distinctio, recusandae.</p>
</div>
<div class="right-column">
<!-- content for the right column -->
<h1>Right column</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae necessitatibus beatae ullam reiciendis aliquid dolorum explicabo quod consectetur deleniti, maxime quo laudantium sed vel iure nemo! In molestiae aliquid quasi?</p>
</div>
</div>
</body>
</html>
然而，這並不適用於需要精確控制元素放置的複雜佈局或設計。對不支援 CSS3 flexbox 的舊版瀏覽器支援有限。這需要仔細考慮內容層次結構，以確保在較小螢幕上正確排列列。一旦實現，更改佈局可能很困難。
結論
您需要考慮一些約束條件
CSS 約束：要保持每列的背景顏色全尺寸，需要使用 clearfix hack 或使用 flexbox 或網格佈局。
內容約束：每列的內容需要適合列的寬度和高度，否則可能會破壞佈局。
響應式設計約束：您需要確保兩列布局具有響應性，並且在不同的螢幕尺寸上都能正常工作。
輔助功能約束：確保佈局可供殘疾使用者訪問非常重要。
瀏覽器相容性約束。
請記住徹底測試您的佈局，並根據需要進行調整，直到您對結果滿意為止。
更新於：2023年8月18日
240 次瀏覽
廣告