javascript当中float:left,clear:left,float:right和clear:right用法

2.float:left,clear:left,float:right和clear:right用法

例 1.2

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        #first{
            background-color:#EE1583;
            width:15%;
            float:left;
        }
        #second{
            background-color:#90aaaa;
            width:15%;
            /*clear:right;*/
            float:left;
        }
        #third{
            background-color:#eeee00;
            width:15%;
            clear:left;/*马克-to-win:clear:left;效果就会换行了,文档:在左侧不允许浮动元素。*/
            float:left;
            /*clear:right;*/
        }
        #fourth{
            background-color:#FF0000;
            width:20%;
            clear:left; /*clear:left;就会换行了*/
            float:right;
        }
        #fifth{
            background-color:#6A5ACD;
            width:20%;
            clear:right;/*上一个是clear:right,所以用clear:right;就会换行了*/
            float:right;
        }

    </style>
</head>
<body>
<span id="first" >11</span>
<span id="second">22</span>
<span id="third">33</span>
<span id="fourth">44</span>
<span id="fifth">55</span>

</body>
</html>

更多请见:https://blog.csdn.net/qq_43650923/article/details/102363285

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
这段代码是一个CSS样式表,它对一个具有特定id和类的元素进行样式定义。下面是对代码的解释: ```css #bgd { clear: both; width: 300px; height: 300px; overflow: hidden; } ``` - `#bgd`选择器选择id为"bgd"的元素。`clear: both;`属性用于清除浮动,确保周围的元素不会受到浮动元素的影响。`width: 300px;`和`height: 300px;`属性分别设置元素的宽度和高度为300像素。`overflow: hidden;`属性用于隐藏超出元素尺寸的内容。 ```css .vbgd { width: 410%; height: 300px; } ``` - `.vbgd`选择器选择类为"vbgd"的元素。`width: 410%;`属性将元素的宽度设置为父元素宽度的410%。`height: 300px;`属性设置元素的高度为300像素。 ```css #bgd #tp1, #bgd #tp2 { float: left; width: 300px; height: 300px; float: left; } ``` - `#bgd #tp1, #bgd #tp2`选择器选择id为"tp1"和"tp2"的元素,这些元素是id为"bgd"的父元素下的子元素。`float: left;`属性将这些元素向左浮动。`width: 300px;`和`height: 300px;`分别设置元素的宽度和高度为300像素。 ```css #bgd #tp1 img, #bgd #tp2 img { float: left; margin-right: 2px; width: 124px; height: 300px; } ``` - `#bgd #tp1 img, #bgd #tp2 img`选择器选择id为"tp1"和"tp2"的元素下的img标签元素。`float: left;`属性将这些img标签元素向左浮动。`margin-right: 2px;`属性指定了img标签元素右侧的外边距为2像素。`width: 124px;`和`height: 300px;`分别设置img标签元素的宽度和高度分别为124像素和300像素。 根据代码提供的信息,我可以看出这段代码可能是用于创建一个具有固定尺寸的图片轮播器或图像展示区域,其中图片被水平排列,并且当超出容器尺寸时会被隐藏。请注意,这段代码可能还需要其他的HTML结构和JavaScript代码来实现完整的功能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mark_to_win

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值