資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究CSS 流式佈局
顧名思義，流式佈局指的是自適應佈局。它會根據螢幕尺寸調整HTML元素的尺寸。
當我們為HTML元素使用硬編碼的尺寸值時，它會建立一個固定佈局，有90%的可能性出現溢位。因此，最好使用流式佈局，以便網頁能夠相容所有裝置。
在本教程中，我們將學習如何使用CSS建立流式佈局。
語法
使用者可以按照以下語法在CSS中建立流式佈局。
Selector_1 {
Width: 60%;
}
Selector_2{
Width: 40%;
}
在上面的語法中，我們將第一個HTML元素的寬度設定為60%，第二個HTML元素的寬度設定為40%。現在，它將根據螢幕寬度顯示元素的尺寸。
示例1（純流式佈局）
下面的示例定義了主div元素，包含part1和part2兩個div元素。part1包含文字，part2包含影像。這裡，我們將part1的寬度設定為70%，part2的寬度設定為24%。此外，我們還為part1設定了margin-right。因此，開發者應該使用百分比設定margin和padding。
在輸出中，使用者可以觀察到div元素如何根據螢幕寬度改變其尺寸。
<html>
<head>
<style>
.main {
width: 100%;
height: auto;
}
.part1 {
width: 70%;
height: auto;
float: left;
background-color: #f1f1f1;
margin-right: 3%;
border: 2px solid green;
}
.part2 {
width: 18.25%;
height: auto;
float: left;
background-color: #ccc;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> Using the Liquid layout for the web page </h2>
<div class = "main">
<div class = "part1">
TutorialsPoint is a great website for online learning of different programming languages. It provides a very good platform for beginners to learn different languages. Also, it provides blogs and video tutorials for a better understanding of the concepts and practical knowledge of the languages.
</div>
<div class = "part2">
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcReu-Tm0Iy01TPY9o-jDlMehh7S1mZc4q4D85j-4Dw&s"
alt = "logo">
</div>
</div>
</body>
</html>
示例2（響應式流式佈局）
在下面的示例中，我們建立了響應式流式佈局。第一個示例的問題是，對於較小的螢幕裝置（例如移動裝置），內容會變得壓縮。因此，我們需要建立一個響應式流式佈局。
這裡，我們在主div元素中添加了兩個div。我們還為兩個影像元素設定了動態寬度。此外，我們還使用了媒體查詢，當螢幕尺寸小於716畫素時，更改影像的flex方向。因此，使用者可以在較小的螢幕上看到合適的影像。
<html>
<head>
<style>
.main { width: 100%;height: auto; display: flex; }
.image1 { width: 47%; height: auto; margin-right: 4%; }
.image2 { width: 47%; height: auto;}
img {width: 100%; height: auto;}
@media only screen and (max-width: 716px) {
.main { flex-direction: column; }
.image1 {
margin-right: 0;
width: 90%;
margin: 0 auto;
margin-bottom: 20px;
}
.image2 { width: 90%; margin: 0 auto; }
}
</style>
</head>
<body>
<h2> Using the Liquid layout for web page </h2>
<div class = "main">
<div class = "image1"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8qEZ7q390IcYonOcGAzbHqlcGl1-IwEzLaSEY0gbv&s"
alt = "image 1"> </div>
<div class = "image2"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyBspFh9CM_UZT_yaPeVke8VdlzuVO3CStQzqnHX_l&s"
alt = "image 2"></div>
</div>
</body>
</html>
示例3（固定+流式佈局）
在下面的示例中，我們演示瞭如何使用CSS同時建立固定佈局和流式佈局。這裡也在主div中添加了文字和影像。之後，我們將影像的固定寬度設定為400px，並使用calc()方法將文字div元素的動態寬度設定為100% - 400px。
在輸出中，使用者可以觀察到影像的固定寬度和不同螢幕下文字的可變寬度。
<html>
<head>
<style>
.main { width: 100%; height: auto; display: flex;}
.image { width: 400px; height: auto; margin-left: 4%;}
.text {
width: calc(100% - 400px);
height: auto;
font-size: 2rem;
color: green;
}
img { width: 100%; height: 100%; }
</style>
</head>
<body>
<h2> Creating the Fixed + Liquid layout for the web page </h2>
<div class = "main">
<div class = "text">
This is a nature image. Do you like it? Change the size of the web page and observe that image has a fix dimensions.
</div>
<div class = "image"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyBspFh9CM_UZT_yaPeVke8VdlzuVO3CStQzqnHX_l&s" alt = "image 2"></div>
</div>
</body>
</html>
示例4（表格中的流式佈局）
在這個示例中，我們使用CSS在表格中添加了流式佈局。這裡，我們使用HTML元素建立了一個表格。之後，我們使用'table-layout' CSS屬性和'auto'值來新增流式佈局。使用者可以更改瀏覽器視窗的大小，並觀察其列寬如何在不同的螢幕尺寸下發生變化。
<html>
<head>
<style>
.liquid-layout {width: 100%; table-layout: auto; border-collapse: collapse; }
.liquid-layout td { padding: 10px; border: 1px solid #ccc; text-align: center;}
</style>
</head>
<body>
<h2> Creating the table with Liquid layout for web page </h2>
<table class = "liquid-layout">
<tr>
<td> Country </td>
<td> Population </td>
<td> Language </td>
<td> Continent </td>
</tr>
<tr>
<td> India </td>
<td> 1.3 billion </td>
<td> Hindi </td>
<td> Asia </td>
</tr>
<tr>
<td> USA </td>
<td> 330 million</td>
<td> English </td>
<td> North America </td>
</tr>
<tr>
<td> UK </td>
<td> 67 million </td>
<td> English </td>
<td> Europe </td>
</tr>
</table>
</body>
</html>
結論
我們學習瞭如何使用CSS建立流式佈局。我們已經看到了在不同HTML元素中新增流式佈局的四個示例。在第一個示例中，我們添加了一個純流式佈局。在第二個示例中，我們添加了一個響應式流式佈局。在第三個示例中，我們學習瞭如何同時建立固定佈局和流式佈局；在最後一個示例中，我們向表格中添加了流式佈局。
1K+ 瀏覽量
