三列布局侧列弹性中间固定 [英] Three Column Layout side columns elastic middle fixed
本文介绍了三列布局侧列弹性中间固定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道如果有人知道如何有一个固定的宽度的中心的div和右和左div弹性在中心的div的任一侧。中心的div有一个最小宽度和最大宽度CSS属性aswell。
解决方案
尝试添加您尝试的代码
<$ c $ c>< div class =container>
< div class =fluid>
我是流动的
< / div>
< div class =fixed>
我修正了!
< / div>
< div class =fluid>
我是流动的
< / div>
< / div>
CSS
html,body {
height:100%;
font-family:'Arial','Helvetica',Sans-Serif;
}
.container {
display:table;
width:100%;
height:100%;
}
.container> div {
display:table-cell;
text-align:center;
}
.fixed {
min-width:200px; max-width:300px;
background:rgb(34,177,77);
color:white;
}
.fluid {
background:rgb(0,162,232);
}
I was wondering if anyone knows how to have a fixed width of the centered div and have the right and left div elastic on either side of the centered div. The centered div has a min-width and max-width css properties aswell.
解决方案
Try to add the code what you tried when you post a question.
HTML
<div class = "container">
<div class = "fluid">
I am fluid
</div>
<div class = "fixed">
I'm Fixed!
</div>
<div class = "fluid">
I am fluid
</div>
</div>
CSS
html, body {
height: 100%;
font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
text-align: center;
}
.fixed {
min-width: 200px; max-width:300px;
background: rgb(34, 177, 77);
color: white;
}
.fluid {
background: rgb(0, 162, 232);
}
这篇关于三列布局侧列弹性中间固定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文