recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - La colonne de droite a une largeur fixe et la colonne de gauche est adaptative et a une largeur minimale

La colonne de droite a une largeur fixe et la colonne de gauche est adaptative, mais lorsque la fenêtre est réduite dans une certaine mesure, la colonne de gauche ne deviendra plus plus petite. Si je veux obtenir cet effet, comment dois-je le présenter ?

phpcn_u1582phpcn_u15822738 Il y a quelques jours965

répondre à tous(3)je répondrai

  • phpcn_u1582

    phpcn_u15822017-05-31 10:41:00

    Largeur minimale de votre colonne de gauche : 300 px, bien sûr, elle ne diminuera pas. En fait, la façon la plus simple de l'écrire est :

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

    Et c'est ça le problème ? Pourquoi ne voyez-vous pas le problème ?

    Suivi :

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

    Cela devrait répondre à vos besoins, mais je ne sais pas comment vous voulez le présenter s'il fait moins de 900px au final, j'utilise donc simplement la barre de défilement

    répondre
    0
  • 某草草

    某草草2017-05-31 10:41:00

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

    répondre
    0
  • 我想大声告诉你

    我想大声告诉你2017-05-31 10:41:00

    .con(.l,.r)
    .con
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    height:xpx;
    .l
    ....
    .r
    ....
    Vous devriez pouvoir le comprendre
    Mais les paramètres sont déterminés La largeur dépend toujours de vous
    flex est en fait préférable d'utiliser des proportions

    répondre
    0
  • Annulerrépondre