CSS 液体布局

如其名所示，液体布局的意思是泛滥布局。它会根据屏幕尺寸改变HTML元素的尺寸。

当我们对HTML元素使用硬编码的尺寸值时，会创建一个固定布局，有90%的概率会溢出。因此，最佳实践是使用液体布局，以便网页在任何设备上都能兼容。

在本教程中，我们将学习如何使用CSS创建液体布局。

语法

用户可以按照以下语法来在CSS中创建液体布局。

Selector_1 {
   Width: 60%;
}
Selector_2{
   Width: 40%;
}

在上面的语法中，我们给第一个HTML元素分配了60%的宽度，第二个HTML元素分配了40%的宽度。现在，它将根据屏幕宽度显示元素的尺寸。

示例1（纯流体布局）

下面的示例定义了一个包含part1和part2 div元素的主div元素。part1包含文本，part2包含图像。在这里，我们给part1分配了70%的宽度，给part2分配了24%的宽度。而且，我们给part1分配了margin-right。所以，开发人员应该以百分比方式为元素提供边距和填充。

在输出中，用户可以观察到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像素时改变图像的弹性方向。因此，用户可以在较小的屏幕上看到正确的图像。

<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元素创建了一个表格。之后，我们使用了CSS属性“table-layout”以及“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>