第一题:左中右布局,中间自适应并优先显示在前面
kujian opened this issue · 6 comments
kujian commented
左侧200px,右侧300px,中间自适应并优先显示在前面。(忽略ie兼容性问题)
wanglianga commented
父容器(width:100%;display:flex;min-width:600px)
中间宽度(calc(100% - 500px))
kujian commented
<div class="container">
<div class="center">
<div class="cont">中间内容</div>
</div>
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
.container{min-width:600px;}
.center{float:left; width:100%;}
.cont{margin-left:200px; margin-right:300px;}
.left{float:left; margin-left:-100%; width:200px;}
.right{float:left; margin-left:-300px; width:300px;}
【演示】
兼容性最好,常用这种写法
zxjzx commented
.content{
display: grid;
min-width: 600px;
grid-template-columns:200px 1fr 300px;
}
<div class="content">
<div class="left">左边</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
kujian commented
<div class="container2">
<div class="center2">中间内容</div>
<div class="left2">左侧内容</div>
<div class="right2">右侧内容</div>
</div>
.container2{position:relative; color:yellow; min-width:600px;}
.center2{position:absolute; left:200px; right:300px; top:0; background:black;}
.left2{position:absolute; left:0;top:0; width:200px; background:orange;}
.right2{position:absolute; right:0; top:0; width:300px; background:orange;}
【演示】
浮动布局,适用全布局,不适用局部布局(需要限制高度)
EnTrouble commented
<div class="father">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="content">中间文字</div>
</div>
.father {min-width: 600px;}
.left {float: left;width: 200px;}
.right {float: right;width: 300px;}
.content {text-align: center;}
kujian commented
flex布局
<div class="container4">
<div class="center4">中间内容4</div>
<div class="left4">左侧内容4</div>
<div class="right4">右侧内容4</div>
</div>
.container4{display:flex; flex-flow:row nowrap;}
.left4{width:200px; background:orange; order:1;}
.center4{flex:1;background:purple; order:2;}
.right4{width:300px;background:orange; order:3;}
【演示】
移动端适用