一幅图学会圣杯布局
2016-03-02 23:28
519 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.out {
/*height: 50px;*/
background: yellow;
padding:0px 210px 0px;
}
.center {
height: 50px;
width: 100%;
float: left;
background: green;
min-width: 300px;
}
.left {
width: 200px;
height: 50px;
background: pink;
float: left;
margin-left: -210px;
}
.right {
width: 200px;
height: 50px;
background: pink;
float: right;
margin-right: -210px;
}
</style>
</head>
<body>
<div class="out">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android布局的小窍门？
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- [css] line-height 百分比单位和数值单位的区别
- 异步流程控制：7 行代码学会 co 模块
- [译] React 入门
- Apple官网研究之使用Justify布局导航
- 如何优雅处理前端异常？
- 设计更快的网页（三）：字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法