<div id="app">
<div id="middle">
<div id="middle-text">
middle <br>middle <br>middle <br>middle <br>middle <br>middle <br>middle <br>middle <br> middle <br>
middle <br>middle <br> middle <br>middle <br>middle <br>middle <br>middle <br> middle <br>
</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#app{
min-width:600px;
overflow:hidden;
}
#left,#right{
width: 200px;
background: gray;
text-align: center;
float: left;
/* padding-bottom把盒模型撑开，margin-bottom把盒模型padding撑开的隐藏 */
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#left{
margin-left:-100% ;
}
#right{
margin-left:-200px ;
}
#middle{
width: 100%;
float: left;
background: pink;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#middle-text{
padding:0 200px;
}
</style>
三列布局
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 两列布局 一列固定宽度，另一列自适应宽度如下图所示：第一列固定宽度200px，第二列自适应。 代码 效果 使用fl...
- 两类布局的直接上代码 三列布局的几种方法： 下面直接是上面几种方法的代码： 下面附上小弟学习的参考资料，希望对大家...
- 1、双列布局（拖动窗口时，窗口左边不动，右边自适应）：左边宽度固定，右边自适应 2、三列布局（两边不动中间动）：两...
