84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
右列は固定幅、左列はアダプティブですが、ウィンドウがある程度縮小すると左列は小さくならなくなります。この効果を実現したい場合、どのようにレイアウトすればよいですか?
你这左列min-width:300px;当然不会再变小。其实最简单的写法是:
.left{ float:left; display:inline-block; ... } .right{ width: 600px; ... }
而且是这个问题吗?怎么没看到问题呢?
后续:
.wrapper{ width:100%; position:relative; overflow: scroll; min-width: 900px; } .left{ min-width: 300px !important; position: absolute; right: 600px; background-color: yellow; height:500px; width: 100%; } .right{ width: 600px; height:500px; float: right; background-color: red; }
这样应该满足你的需求,但是也不知道最后小于900px你是要怎么呈现,我就直接用滚动条了
<p class="wrapper"> <p class="left"></p> <p class="right"></p> </p> .wrapper{ position:relative; height:auto; padding-right: 600px; min-width: 900px; -webkit-box-sizing:border-box ; box-sizing:border-box ; } .right{ position:absolute; right:0px; top:0px; width: 600px; min-height: 100%; height:auto; background: #000; } .left{ position: relative; background: #c0c0c0; height: 400px; }
.con(.l,.r).condisplay:flex;flex-wrap:nowrap;width:100%;height:xpx;.l.....r....应该可以 应该看的懂吧不过设置定宽还是看你了flex其实用比例更好
你这左列min-width:300px;当然不会再变小。其实最简单的写法是:
而且是这个问题吗?怎么没看到问题呢?
后续:
这样应该满足你的需求,但是也不知道最后小于900px你是要怎么呈现,我就直接用滚动条了
.con(.l,.r)
.con
display:flex;
flex-wrap:nowrap;
width:100%;
height:xpx;
.l
....
.r
....
应该可以 应该看的懂吧
不过设置定宽还是看你了
flex其实用比例更好