html+css 浮动标签

最新推荐文章于 2024-07-09 22:55:28 发布

junlingshiwo

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量4.3k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45722135/article/details/104334930

版权

一：浮动
浮动有两种方式：1]display:inline{这个知道就行}
2]就是 float {这就是css中最常用的浮动方式}

二：CSS浮动
1】float是CSS样式中的定位属性，用于设置标签的居左和居右浮动，
2】浮动值:left{向左浮动}
right：{向右浮动}

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 60%;
            height: 300px;
            background-color: red;
        }
     .test1{
         background-color: orange;
         width: 200px;
         height: 200px;
         /*display: inline;*/
         /*浮动*/
         float: left;
     }
        .test2{
            background-color: green;
            /*display: inline;*/
            float: right;
        }
    </style>
</head>
<body>
 <div id="box">
     <div class="test1">第一段</div>
     <div class="test2">第二段</div>
</body>
</html>

概括：
1】在副本中所建两个浮动样式，橙色div{左浮动}和绿色div{右浮动}设置成浮动，排列在一行中，都使用float浮动
2】两个浮动样式都在box内进行完成。

junlingshiwo

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+css 浮动标签

一：浮动浮动有两种方式：1]display:inline{这个知道就行} 2]就是 float {这就是css中最常用的浮动方式}二：CSS浮动1】float是CSS样式中的定位属性，用于设置标签的居左和居右浮动，2】浮动值:left{向左浮动} right：{向右浮动}例：&...
复制链接

扫一扫