文档章节

border实现等高布局

学霸猫
 学霸猫
发布于 2018/12/19 15:08
字数 490
阅读 5
收藏 0

 效果图

实现上图效果的全部html+css代码

<div class="box">
    <nav>
      <h3 class="nav">导航1</h3>
      <h3 class="nav">导航2</h3>
    </nav>
    <section>
      <div class="module">模块1</div>
      <div class="module">模块2</div>
    </section>
</div>
/* 导航背景区border创建 */
.box {
  border-left: 150px solid #333;
  background-color: #f0f3f9;
  text-align: center;
}
/* 清除浮动影响,不能使用overflow:hidden */
.box:after {
  content: "";
  display: block;
  clear: both;
}
h3{
  font-size: 100%;
  margin: 0;
  font-weight: 400;
}
/* 布局主结构 */
.box > nav {
  width: 150px;
  margin-left: -150px;
  float: left;
}
.box > section {
  overflow: hidden;
}
/* 导航列表和模块列表 */
.nav {
  line-height: 40px;
  color: #fff;
}
.nav + .nav {
  line-height: 39px;
  border-top: 1px solid #555;
}
.module {
  line-height: 40px;
}
.module + .module {
  line-height: 39px;
  border-top: 1px solid #beceeb;
}

拆出如下核心代码解释下原理

.box {
  border-left: 150px solid #333;
}
.box:after {
  content: "";
  display: block;
  clear: both;
}
.box > nav {
  width: 150px;
  margin-left: -150px;
  float: left;
}

nav这一栏通过float:left浮动起来,通过margin-left:-150px改变自身的浮动位置,从而在正常浮动位置的基础上向左移动150px,由于nav自身也是设置了150px,所以nav刚好在box的border(已设置border-left-width: 150px)区域内。当然实现这个的前提是box要清除浮动,否则就是没有高度的逗比了。这里清除浮动的方式不能使用overflow:hidden,因为overflow的作用范围是padding-box,ie貌似是content-box,左浮动的nav会被隐藏掉无法达到我们要的效果。随着nav内容增加,nav的高度改变,会撑开box,border高度也会改变,右侧section也会改变,就实现了等高。右侧section内容增加同理。

这种布局方式缺点是border不支持百分比,适合至少一栏定宽的布局。其次,由于一个元素的边框数目是有限的,border布局基本上只能满足2~3栏的布局。

 

参考: 《css世界》 张鑫旭

© 著作权归作者所有

共有 人打赏支持
学霸猫
粉丝 4
博文 88
码字总数 36427
作品 0
深圳
程序员
私信 提问
左右两栏等高实现方法

等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白,有时需要让右边的高度和左边的保持一致。实现的方法有很多,以前一般是用背...

ys-l
2010/01/01
238
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
2018/10/30
0
0
【CSS】margin负值 – 一个秘密武器

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 1、带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

呢喃的猫咪
2013/03/20
0
1
分享用纯CSS实现三列DIV等高布局的方法

DIV等高布局,我想很多人都遇见过,我也看过不少的方法,有的是通过背景图片,实现假象的等高效果;还有的用js实现等等。这些都是方法,但是现在都不用以上的方法,来个真正的纯css实现等高!...

^6^|^6^
2011/12/01
0
0
我所知道的几种display:table-cell的应用

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的,但是IE6/7只能对你说sorry了,这...

林文安
2012/05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

监听DOM上某一个元素是否发生变化,利用MutationObserver来监听元素变化

/** * 观察DOM是否发变化的事件 * @type {MutationObserver|*} */var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserv......

lwkai
9分钟前
0
0
遇到的问题

问题1:前两天在Nodepad++写了一个登录页面,但在Chrome中调试一直写不进Cookie。 解决办法:Chrome浏览器不支持本地静态js写Cookie。换用Edge调试即可。 内心:卧槽,浪费我这么多时间。 问...

akane_oimo
10分钟前
0
0
Oracle学习日志-6(聚合查询)

聚合函数 聚合函数可以对数据进行某种操作或者计算。比如几个常用的函数: COUNT:计算表中行数。 SUM:计算表中数据列中数据的合计值。 AVG:计算表中数据列中数据的平均值。 MAX:求出表中...

白话
12分钟前
0
0
Axure原型工具Axure RP9安装及Licensee

http://www.zhanshaoyi.com/9132.html

晚风0623
17分钟前
1
0
如何限制用户仅通过HTTPS方式访问OSS?

一、当前存在的问题 当前OSS支持用户使用HTTPS/HTTP协议访问Bucket。但由于HTTP存在安全漏洞。大型企业客户都要求使用HTTPS方式访问OSS,并且拒绝HTTP访问请求。 目前OSS可以通过RAM policy方...

阿里云官方博客
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部