欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  css要实现常见的自适应两列布局的方式方法挺多。
 
  这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC,可以搜搜看先,基本都讲的差不多了。等有更多空余时间,专门给讲讲BFC以及实例的东西。就这样吧,上代码:
 
  
 
  
 
  <!--利用BFC的overflowhidden实现两列布局-->
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <title>利用BFC规则实现两栏布局</title>
 
  <metacharset="utf8">
 
  <styletype="text/css">
 
  *{
 
  margin:0;
 
  padding:0;
 
  }
 
  .contain{
 
  width:100%;
 
  height:100%;
 
  background:grey;
 
  color:#fff;
 
  }
 
  .contain.left{
 
  float:left;
 
  /*margin-right:20px;*/
 
  width:200px;
 
  height:100%;
 
  word-wrap:break-word;/*用于纯数字和英文时能够超出时自动换行*/
 
  background:blue
 
  }
 
  .contain.right{
 
  height:100%;
 
  overflow:hidden;/*让right成为一个BFC*/
 
  word-wrap:break-word;/*用于纯数字和英文时能够超出时自动换行*/
 
  background:darkblue;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <!--CSS2.1规范中已经明确提出,设置overflow属性(非visible)能触发块级格式化上下文(BlockFormattingConext,BFC)。-->
 
  <div>
 
  <div>Loremipsumdolorsitamet,consecteturadipisicingelit.Officiaquiserroreaveniamanimiquibusdam,nobisrepudiandaeconsectetursed?Minusarchitectocumqueperspiciatissaepererumnondolorumvoluptatessimilique,consequuntur.</div>
 
  <div>right这里的overflow:hidden不是本来的意思(超出容器内容截取掉不显示),而是利用了BFC规则(overflow不为visible时会创建出一个BFC)</div>
 
  </div>
 
  </body>
 
  </html>
 
  注意代码中最长的那行(37行),这里的文本不是英文,是拉丁文,当然不是我手打的这么多。跟大家分享下,在测试时,想输入一些内容又不知道输入什么,怪难看的时候,可以偷懒。输入lorem,然后tab键出来,除了第一句话时固定的,后面的那段时它随机出来的句子。前提是你的编辑器装有emmit插件,Hbuilder,vscode内置有,直接可用,submittext需要去装插件。记事本就肯定是不行的了,这些都是我亲测的。算是一个小干货吧!其他的,注释也差不多写了,本来代码也很简单,就这么些东西,css需要自己多动手去试,去实现出来。这次随笔就到这儿了,忙的时候质量可能不太好,不过现在开始坚持写一些东西了。
 
  还有就是这是左边固定,右边自适应。右边固定,左边自适应相信你也能轻松搞定吧,这都是小事,想起了,提醒下。这个两列自适应不是两列都是自适应的。




本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j54114.shtml