数据结构
网络
关系数据库管理系统 (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+ 浏览量
