CSS三列布局两端固定宽度中间自适应
发布时间：2014-02-27 15:35:01 作者：佚名 
我要评论
我要评论CSS三列布局走出HTML布局阴影，两端固定宽度，中间自适应结构，下面有个不错的示例，大家可以参考下
两端固定宽度，中间自适应结构：
<div class="wrap">
<div class="main">
<div class="content"></div>
</div>
<div class="submain">2</div>
<div class="sidebar">3</div>
</div>
.wrap{width: 500px;border: 1px solid;overflow: hidden;}
.main{float: left;width: 100%;}
.content{height: 50px;margin: 0 150px;background-color: #f60;}
.submain{float: left;width: 150px;height: 50px;margin-left: -100%;background-color: #6f0;}
.sidebar{float: left;width: 150px;height: 50px;margin-left: -150px;background-color: #06f;}
结果如下所示：
复制代码
代码如下:<div class="wrap">
<div class="main">
<div class="content"></div>
</div>
<div class="submain">2</div>
<div class="sidebar">3</div>
</div>
复制代码
代码如下:.wrap{width: 500px;border: 1px solid;overflow: hidden;}
.main{float: left;width: 100%;}
.content{height: 50px;margin: 0 150px;background-color: #f60;}
.submain{float: left;width: 150px;height: 50px;margin-left: -100%;background-color: #6f0;}
.sidebar{float: left;width: 150px;height: 50px;margin-left: -150px;background-color: #06f;}
结果如下所示：
相关文章
这篇文章主要介绍了一文汇总 CSS 两列布局和三列布局的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2020-06-28- 这篇文章主要介绍了CSS实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下2016-06-23
- 这篇文章主要介绍了CSS两列布局实现方式总结,讨论了包括absolute + margin和float + margin方式的一些实践和问题,需要的朋友可以参考下2016-06-02
- 这篇文章主要介绍了横向两列布局，即左列固定，右列自适应的4种CSS实现方式，感兴趣的小伙伴们可以参考一下2016-04-27
- 学习DIV+CSS网页布局中的两列布局，本文为大家分享的是DIV+CSS网页布局教程的第二篇，感兴趣的小伙伴们可以参考一下2016-03-15
- CSS两列布局，右侧固定，左侧自适应宽度.2009-11-25
- 在CSS面试题中经常会遇到CSS两列布局的问题，下面给大家分享CSS两列布局的实现方式，每种方法给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2021-07-27
最新评论