前端画竖线

最新推荐文章于 2024-02-28 12:37:15 发布

code enthusiasts

最新推荐文章于 2024-02-28 12:37:15 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/girllan/article/details/118421296

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一条竖线的写法

实现原理：

利用浮动,设置width:1px

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解决浮动导致的页面非正常显示</title>
  <style>
    .box1 {
      border: 2px solid rgb(116, 44, 44);
    }

    /* 解决高度塌陷 */
    .clearfloat::after {
      content: "";
      display: block;
      visibility: hidden;
      height: 0px;
      clear: both;
    }

    #box2 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #f00;
    }
    /* 竖线 */
    #col-line {
      float: left;
      width: 1px;
      height: 200px;
      background: blueviolet;
    }

    #box3 {
      float: right;
      background-color: #ff0;
      width: 100px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box1 clearfloat">
    <div id="box2"></div>
    <div id="col-line"></div>
    <div id="box3"></div>
  </div>
  </div>

  </div>
</body>

</html>

在这里插入图片描述

code enthusiasts

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端画竖线

一条竖线的写法实现原理：利用浮动,设置width:1px代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫