2018-05-22 CSS 左右布局、左中右布局以及一些小技巧

最新推荐文章于 2024-08-24 21:17:20 发布

Enoch-Qin

最新推荐文章于 2024-08-24 21:17:20 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： css 浮动定位

本文链接：https://blog.csdn.net/EnochQin/article/details/80399826

版权

本文详细介绍了CSS中的左右布局和左中右布局方法，包括使用浮动和绝对定位的策略。同时，针对特定情况，讨论了何时选择浮动或绝对定位，并分享了一些实用的小技巧，如伪元素清除浮动，处理hover边框变化，以及利用iconfont等资源优化布局。

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

如果有以下html结构，设置左右两栏布局

<div class="parent">
  <div class="leftChild"></div>
  <div class="rightChild"></div>
</div>

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.rightChild{
  float:left;
}

设置position绝对定位，为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下：

.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  <

关注

专栏目录