Javascript – Die rechte Spalte hat eine feste Breite und die linke Spalte ist adaptiv und hat eine Mindestbreite

Question

Die rechte Spalte hat eine feste Breite und die linke Spalte ist adaptiv, aber wenn das Fenster bis zu einem gewissen Grad verkleinert wird, wird die linke Spalte nicht mehr kleiner. Wenn ich diesen Effekt erzielen möchte, wie sollte ich ihn anordnen?

Answer 1

你这左列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你是要怎么呈现，我就直接用滚动条了

Answer 2

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

Answer 3

.con(.l,.r)
.con
display:flex;
flex-wrap:nowrap;
width:100%;
height:xpx;
.l
....
.r
....
应该可以 应该看的懂吧
不过设置定宽还是看你了
flex其实用比例更好