[CSS布局]简单的CSS三列布局

前言

公司终于可以上外网了，近期在搞RN的东西，暂时脑子有点晕，等过段时间再来写点总结。倒是最近有个新学前端的同学经常会问一些基础知识，工作空闲写了小Demo给他看，全是很基础的知识，纯粹是顺便记录在这里就当温故而知新吧...

CSS布局

关于布局，我们马上就要想到浮动和定位，根据要实现的布局，相当于用浮动和定位等属性进行拖拽即可。现在浏览器对ie等老版本浏览器的兼容需求越来越低，我们还可以采用css3的flexbox布局来设计，这个如今已经是必须要掌握的一个布局方法了，尤其是在移动端非常便捷，最近正火react-native正是引入了flexbox布局，学会了这个，再去做app的开发布局也会感觉爽的停不下来。

言归正传，我们来实现一个最简单的三列布局，需要的效果如下：

两边是固定的侧边栏，中间是自适应宽度的主体内容。我们有好几种方法来实现。

绝对定位法

绝对定位感觉是新手最喜欢用的方法，不管怎么样，就是一个定位叠着一个定位，什么样子都可以定位出来。

html:

<div class="container">

  <div class="left">left</div>

  <div class="right">right</div>

  <div class="main">main</div>

</div>

css:

.container {

  position: relative;

  width: 100%;

  height: 800px;

  background: #eee;

}

.left,

.right {

  height: 600px;

  width: 100px;

  position: absolute;

  top: 0;

}

.left {

  left:0;

  background: burlywood;

}

.right {

  right: 0;

  background: coral;

}

.main {

  height: 800px;

  margin: 0 110px;

  background: chocolate;

}

浮动法

浮动法跟绝对定位法一样，比较简单，但是需要注意一点就是html中main部分要写在最后。

html:

<div class="container">

<div class="left">left</div>

  <div class="right">right</div>

<div class="main">main</div>

</div>

css:

.container {

  height: 800px;

  background: #eee;

}

.left,

.right {

  height: 600px;

  width: 100px;

}

.left {

  float: left;

  background: burlywood

}

.right {

  float: right;

  background: coral

}

.main {

  height: 800px;

  margin: 0 110px;

  background:chocolate

}

margin负值法

margin负值法算是一个因吹丝停的方法，我其实很少用，但是公司的很多老项目中倒是用的不少，这个方法比较巧妙，在html中main部分需要嵌套一个div了，并且顺序也是在第一位，然后浮动，后面left和right部分同样浮动按照正常来说会换行了，所有给一个负值的margin，就巧妙的达到了想要的效果。

html:

<div class="container">

  <div class="main">

    <div class="body">main</div>

  </div>

  <div class="left">left</div>

  <div class="right">right</div>

</div>

css:

.container {

  height: 800px;

  background: #eee;

}

.main {

  float: left;

  width: 100%;

  height: 800px;

}

.main .body {

  height: 100%;

  margin: 0 110px;

  background: chocolate;

}

.left {

  float: left;

  margin-left: -100%;

  width: 100px;

  height: 600px;

  background: burlywood;

}

.right {

  float: left;

  margin-left: -100px;

  width: 100px;

  height: 600px;

  background: coral;

}

flexbox布局法

flexbox布局在这个场景中其实并不是最合适的，因为两边侧栏都是固定宽高,和主体部分也没有等高。不过没有关系，学会其基本用法才是最主要的，记住flexbox分为容器与子元素两部分的样式设置，容器的justify-content 和 align-items是两个最重要的属性，子元素的flex属性，集成了flex-grow,flex-shrink,flex-basis三个属性。具体的用法我前面也有一篇文章写过。同时建议参考下CSS参考手册，里面关于flex属性的两个例子非常好。

html：

<div class="container">

<div class="left">left</div>

  <div class="main">main</div>

<div class="right">right</div>

</div>

css:

.container {

  display: flex;

  height: 800px;

  background: #eee;

}

.left {

  flex: 0 0 100px;

  height: 600px;

  background: burlywood;

}

.main {

  flex: 1 1 auto;

  margin: 0 10px;

  background: chocolate;

}

.right {

  flex: 0 0 100px;

  height: 600px;

  background: coral

}

总结

突然写点简单的CSS知识感觉神清气爽，感觉找到了刚学时候的新鲜感~不限网的感觉不错，以后继续在博客园逛逛写写。

巴特西

[CSS布局]简单的CSS三列布局

前言

CSS布局

绝对定位法

浮动法

margin负值法

flexbox布局法

总结

最新文章

热门文章