CSS-浮动1

z_Ever1

于 2017-10-26 14:31:41 发布

阅读量258

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/z_Ever1/article/details/78353495

版权

CSS 专栏收录该内容

22 篇文章

订阅专栏

本文通过一个简单的HTML与CSS示例展示了如何使用浮动属性实现元素并排显示的效果。该示例包括三个不同尺寸的div元素，分别设置为红色、蓝色和绿色背景，并通过float属性设置为左浮动，展示了基本的网页布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>float</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       div:first-child{
           width: 100px;
           height: 400px;
           background-color: red;
           float: left;
       }
       div:nth-child(2){
           width: 200px;
           height: 200px;
           background-color: blue;
           float: left;
       }
       div:last-child{
           width: 300px;
           height: 300px;
           background-color: green;
           float: left;
           /*clear: both;*/
       }
   </style>
</head>
<body>
   <div></div>
   <div></div>
   <div></div>
</body>
</html>