HTML（div块浮动）

最新推荐文章于 2023-11-20 15:24:50 发布

叮定

最新推荐文章于 2023-11-20 15:24:50 发布

阅读量3.4k

点赞数 3

分类专栏： HTML

本文链接：https://blog.csdn.net/mooonk/article/details/115214878

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

HTML（div块浮动）

之前我们知道了一个div块只能自己独占一行，但是通过浮动设置我们可以使多个不同的块处于同一行
浮动设置
浮动案例实现

一、浮动设置

div块标签的css样式实现是通过选择器实现的，我们在选择器中使用float属性达到实现浮动的目的
head中：

/*组选择器*/
.d1,.d2,.d3{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 10px;
}
.d1{
    background-color: aquamarine;
}
.d2{
    background-color: cadetblue;
}
.d3{
    background-color: darkslategray;
}

body中：

<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>

在这里插入图片描述

二、浮动案例

以12306网站的一个广告浮动案例为主

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动案例</title>
    <style>
        .d1,.d2,.d3,.d4
        {
            float: left;
        }
        .d1,.d3
        {
            margin-right: 30px;
            margin-left: 100px;
            margin-top: 30px;
        }
        .d2,.d4
        {
            margin-top: 30px;
            margin-right: 100px;
            margin-left: 30px;
        }

    </style>
</head>
<body>
<div class="d1">
    <img src="img/1.png" width="350px" height="150px">
</div>
<div class="d2" >
    <img src="img/2.png" width="350px" height="150px">
</div>
<div class="d3" >
    <img src="img/3.png"  width="350px" height="150px">
</div>
<div class="d4" >
    <img src="img/4.png" width="350px" height="150px">
</div>
</body>
</html>

结果

在这里插入图片描述

叮定

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML（div块浮动）

HTML（div块浮动）之前我们知道了一个div块只能自己独占一行，但是通过浮动设置我们可以使多个不同的块处于同一行浮动设置浮动案例实现一、浮动设置div块标签的css样式实现是通过选择器实现的，我们在选择器中使用float属性达到实现浮动的目的head中：/*组选择器*/.d1,.d2,.d3{ width: 50px; height: 50px; float: left; margin-right: 10px;}.d1{ background-
复制链接

扫一扫