如何仅通过CSS制作动态布局 [英] How to make a dynamic layout only by CSS
本文介绍了如何仅通过CSS制作动态布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
- 左栏(黄色):宽150px 常量 - 动态
- 中间栏(天蓝色):宽度动态 - 高度动态 li>
- 右栏(绿色):宽度150px 常量 - 高度动态 红色)宽度动态 - 高度常量
m寻找纯CSS解决方案。
解决方案
http://fiddle.jshell.net/2bSaP/show/
HTML:
< div id =container>
< div id =yellow>< / div>
< div id =blue>< / div>
< div id =green>< / div>
< div id =red>< / div>
< / div>
CSS:
body {
margin:0;
}
#黄色{
background:yellow;
位置:绝对;
width:150px;
top:0;
剩下:0;
bottom:155px;
}
#blue {
background:rgb(98,196,255);
位置:绝对;
top:0;
right:155px;
left:155px;
bottom:155px;
}
#green {
background:green;
位置:绝对;
width:150px;
top:0;
right:0;
bottom:155px;
}
#red {
background:brown;
位置:绝对;
height:150px;
剩下:0;
right:0;
bottom:0;
}
I want to create a layout like this:
- The left column (yellow): width 150px constant - height dynamic
- The middle column (azure): width dynamic - height dynamic
- The right column (green): width 150px constant - height dynamic
- The footer (red): width dynamic - height constant
I'm looking for a CSS-only solution.
解决方案
http://fiddle.jshell.net/2bSaP/show/
HTML :
<div id="container">
<div id="yellow"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
</div>
CSS :
body {
margin: 0;
}
#yellow {
background: yellow;
position: absolute;
width: 150px;
top: 0;
left: 0;
bottom: 155px;
}
#blue {
background: rgb(98, 196, 255);
position: absolute;
top: 0;
right: 155px;
left: 155px;
bottom: 155px;
}
#green {
background: green;
position: absolute;
width: 150px;
top: 0;
right: 0;
bottom: 155px;
}
#red {
background: brown;
position: absolute;
height: 150px;
left: 0;
right: 0;
bottom: 0;
}
这篇关于如何仅通过CSS制作动态布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文