問題描述

右列定寬，左列自適應(yīng)，但當(dāng)窗口縮到一定程度，讓左列不再變小。我要實(shí)現(xiàn)這個(gè)效果，怎么布局？

問題解答

你這左列min-width：300px;當(dāng)然不會再變小。其實(shí)最簡單的寫法是：

.left{ float:left; display:inline-block; ...}.right{ width: 600px; ...}

而且是這個(gè)問題嗎？怎么沒看到問題呢？

后續(xù)：

.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;}

這樣應(yīng)該滿足你的需求，但是也不知道最后小于900px你是要怎么呈現(xiàn)，我就直接用滾動條了

<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;}回答3：

.con(.l,.r).condisplay:flex;flex-wrap:nowrap;width:100%;height:xpx;.l.....r....應(yīng)該可以 應(yīng)該看的懂吧不過設(shè)置定寬還是看你了flex其實(shí)用比例更好