前端中的左右布局实现

最新推荐文章于 2024-08-08 13:55:38 发布

weixin_34107739

最新推荐文章于 2024-08-08 13:55:38 发布

阅读量2.7k

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://juejin.im/post/5cdd6947518825693f1ebfcb

版权

本文介绍了前端布局中常见的左右布局实现方法：1）使用float属性，需注意浮动引起的父元素高度塌陷问题；2）通过display: inline-block，需解决不同浏览器的换行符间隙问题；3）利用绝对定位，父元素相对定位，子元素绝对定位。

摘要由CSDN通过智能技术生成

前端得布局中，左右布局是一种很常见布局方式，下面是我在前端工作中的几种方法：

1、float实现左右布局

左右布局实现的一个有效方法是利用css中的float属性,代码如下：

//html
 <div class="box">
   <div class="left-box"></div>
   <div class="right-box"></div>
</div>
   
//css
.box{
  width: 400px;
  height: 300px;
  background: darkgray;
}
.left-box,.right-box{
  width: 50%;
  height: 100%;
  float: left;//设置两个盒子float:left
}
.left-box{
  background: red;
}
.right-box{
  background: green;
}
复制代码

我们很容易就得到了一个左右布局：

但这种方法也并非完美，需要注意浮动所导致的父元素高度塌陷的问题，这就涉及要清除浮动的问题了，清除浮动的方法也有很多，我比较推荐用伪元素清除的方法。这个会单独介绍。