java学习笔记（28）java中css的浮动

最新推荐文章于 2023-10-14 17:20:56 发布

fiveym

最新推荐文章于 2023-10-14 17:20:56 发布

阅读量206

点赞数 1

分类专栏： java 文章标签： css java 前端

本文链接：https://blog.csdn.net/weixin_49750432/article/details/122521136

版权

java 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

css浮动 float
可以让多个块标签处于同一行，不用转换成行内元素
宽和高以及盒子模型的特征得以保留
1.浮动之前

<style>
                  .d1,.d2,d3{
                      width: 200px;
                      height: 200px;
                     
                  }
                  .d1{
                      background-color:yellow;
                  }
                   .d2{
                      background-color:green;
                  }
                   .d3{
                      background-color:bule;
                  }
              </style>
              <body>
                  <div class="d1">
                      1
                  </div>
                  <div class="d2">
                      2
                  </div>
                  <div class="d3">
                      3
                  </div>
              </body>

在这里插入图片描述

2.浮动之后

<style>
                  .d1,.d2,d3{
                      width: 200px;
                      height: 200px;
                      float:left;
                      /*表示向左浮动*/
                  }
                  .d1{
                      background-color:yellow;
                  }
                   .d2{
                      background-color:green;
                  }
                   .d3{
                      background-color:bule;
                  }
              </style>
              <body>
                  <div class="d1">
                      1
                  </div>
                  <div class="d2">
                      2
                  </div>
                  <div class="d3">
                      3
                  </div>
              </body>

在这里插入图片描述
ps：个人学习笔记，如有错误请大佬指正（doge）

fiveym

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java学习笔记（28）java中css的浮动

css浮动 float可以让多个块标签处于同一行，不用转换成行内元素宽和高以及盒子模型的特征得以保留1.浮动之前<style> .d1,.d2,d3{ width: 200px; height: 200px; } .d1{
复制链接

扫一扫

专栏目录