在css里面怎么实现不了两列布局

发布网友发布时间：2022-04-28 14:08

共4个回答

懂视网时间：2022-04-28 18:29

本篇文章给大家带来的内容是关于基于BFC规则实现的css两列布局（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css要实现常见的自适应两列布局的方式方法挺多。

这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC，可以搜搜看先，基本都讲的差不多了。等有更多空余时间，专门给讲讲BFC以及实例的东西。就这样吧，上代码：

<!-- 利用BFC的overflow hidden实现两列布局-->
<!DOCTYPE html>
<html>
 <head>
 <title>利用BFC规则实现两栏布局</title>
 <meta charset="utf8">
 <style type="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）能触发块级格式化上下文(Block Formatting Conext, BFC)。 -->
 <div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.</div>
  <div>right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）</div>
 </div>
 </body>
</html>

注意代码中最长的那行（37行），这里的文本不是英文，是拉丁文，当然不是我手打的这么多。跟大家分享下，在测试时，想输入一些内容又不知道输入什么，怪难看的时候，可以偷懒。输入lorem，然后tab键出来，除了第一句话时固定的，后面的那段时它随机出来的句子。前提是你的编辑器装有emmit插件，Hbuilder，vscode内置有，直接可用，submit text需要去装插件。记事本就肯定是不行的了，这些都是我亲测的。算是一个小干货吧！其他的，注释也差不多写了，本来代码也很简单，就这么些东西，css需要自己多动手去试，去实现出来。这次随笔就到这儿了，忙的时候质量可能不太好，不过现在开始坚持写一些东西了。

还有就是这是左边固定，右边自适应。右边固定，左边自适应相信你也能轻松搞定吧，这都是小事，想起了，提醒下。这个两列自适应不是两列都是自适应的。

【相关推荐：CSS视频教程】

热心网友时间：2022-04-28 15:37

css代码：

body, p, ul { margin:0; padding:0; }
#wrap { overflow:hidden; width:1000px; margin:0 auto; }
#left, #right { margin-bottom:-10000px; padding-bottom:10000px; }
#left { float:left; width:500px; background:#00FFFF; }
#right { float:right; width:500px; background:#00FF00; }追问还是不行啊

热心网友时间：2022-04-28 16:55

可以的，你把问题说详细一点我给你答案追问在css里写完代码不过在网页里刷新不出来啊我刚学这不理解是不是还要在代码页面些什么东西将他们联系起来

热心网友时间：2022-04-28 18:30

<div style="width:800px;margin:0 auto;">
<div style="float:left;width:500px;height:50px;background-color:#ccc;">left</div>
<div style="float:right;width:200px;height:50px;background-color:#000;">right</div>
</div>