ArcherWong博客
首页
博客
灵活的两列布局
作者:ArcherWong
分类:css
时间:2019-01-04 10:33:01
阅读:405
# 方案1 ``` <style type="text/css"> #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;} #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;} #main-right {min-height:400px;background:#7CC0FF;} .float {float:left;} .clear{clear:both: height : 0; line-height:0; font-size:0;} </style> <div id="main"> <div id="main-left" class="float"> 这个是左边部分,宽度确定 </div> <div id="main-right"> 这个是右边部分,宽度自动扩展 </div> <div class="clear"></div> </div> ``` 父元素padding-left:300px,每行留给子元素的宽度=父元素宽度-300px; 这时让左侧元素宽度为300px,并且设置左边距为-300px,则左侧块与父元素左边距重合了。 右侧元素宽度百分之百自适应父元素宽度。 # 方案2 圣杯和双飞翼布局 https://github.com/rccoder/blog/issues/6 ``` <div class="head">head</div> <div class="content"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot">foot</div> ``` 圣杯主要思想 ``` .left, .right, .main { float: left; } .left { width: 40px; height: 60px; background-color: #B9E078; margin-left: -100%; } .right { width: 60px; height: 80px; background-color: #FF9900; margin-left: -60px; } .main { background-color: crimson; width: 100%; } .content { padding: 0 60px 0 40px; } ``` 关键点1: main, left, right 我们都可以看做是在一个浮动流中,依次的顺序也是 main left right。目前是因为 main 占了100% 从而导致 left 与 right 不能和 main 浮在同一行了,这个时候我们可以利用负边距来让 left 向前移动 (即 **margin-left 为正的时候就是和左边的盒子的外边距,那么为负的时候就是像前移动了**)。 关键点2: 给content一个内边距,这样就不会出现left和main,以及right和main的重叠了 双飞翼布局主要思想 ``` <div class="head">head</div> <div class="content cleanfix"> <div class="main"> <div class="wrap">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <div class="foot">foot</div> ``` 双飞翼布局和圣杯布局很像,区别是在 main 里面再添加一个 div, 然后对这个 div 进行 margin-left 和 margin-right,而不是给content一个padding。 ``` .wrap { background-color: darkmagenta; margin-left: 40px; margin-right: 60px; } ```
标签:
上一篇:
css一些知识总结
下一篇:
elasticsearch-mathc和term的区分
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
centos7.3配置guacamole
golang笔记---关联数组(map)
letsencrypt证书-管理工具certbot
golang笔记---template模板语法
详解网络连接
友情链接
node文件
laravel-vue
ArcherWong的博客园