HTML（div块浮动）

最新推荐文章于 2023-07-23 21:47:25 发布

原创最新推荐文章于 2023-07-23 21:47:25 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML中div块的浮动设置，通过设置`float:left`属性，实现多个div在同一行显示。同时，展示了12306网站广告的浮动布局案例，利用浮动和外边距实现图片并排展示的效果，详细解析了相关CSS代码和应用场景。

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>

结果

在这里插入图片描述