javascript - Lajur kanan mempunyai lebar tetap, dan lajur kiri adalah adaptif dan mempunyai lebar minimum

Question

Lajur kanan mempunyai lebar tetap dan lajur kiri adalah adaptif, tetapi apabila tetingkap dikecilkan ke tahap tertentu, lajur kiri tidak lagi menjadi lebih kecil. Jika saya ingin mencapai kesan ini, bagaimana saya harus meletakkannya?

Answer 1

Lebar min lajur kiri anda: 300px; Malah, cara paling mudah untuk menulisnya ialah:

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

Dan adakah ini masalahnya? Mengapa anda tidak melihat masalahnya?

Susulan:

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

Ini sepatutnya memenuhi keperluan anda, tetapi saya tidak tahu bagaimana anda mahu mempersembahkan saiz akhir kurang daripada 900px, jadi saya hanya menggunakan bar skrol

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
.. ..
Anda sepatutnya dapat memahaminya
Tetapi terpulang kepada anda untuk menetapkan lebar tetap
flex sebenarnya lebih baik menggunakan perkadaran