Front-end - CSS une ligne divisée en deux colonnes
滿天的星座
滿天的星座 2017-05-27 17:44:16
0
6
1065

Le dessin de conception stipule que la longueur du bloc de gauche est de 218px, mais je n'ai aucun moyen de déterminer la longueur du bloc suivant dans la même rangée. J'espère que ce dernier bloc pourra remplir automatiquement la rangée actuelle. conseil

Le cssstyle actuel de la première pièce est :

   float: left;
   width: 218px;

Rendu :

滿天的星座
滿天的星座

répondre à tous(6)
阿神
<style type="text/css">
        .row{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-content: center;
            align-items: stretch;
            height: 50px;
        }
        .p1{
            width: 218px;
            flex-shrink: 0;
            background-color: #3c8dbc;
        }
        .p2{
            width: 1%;
            flex: 1;

            background-color: #5b9909;
        }
    </style>
    
    <p class="row">
        <p class="p1">123123123123123</p>
        <p class="p2">1232131</p>
    </p>

flex que vous méritez mais n'oubliez pas d'ajouter le préfixe

仅有的幸福

Le bloc de gauche peut être positionné de manière absolue : position : absolue ; Le bloc de droite est directement margin-left : 218px puis display:block;

;
PHPzhong

1. Parent {display:flex;}, droite {flex:1}{display:flex;},右边{flex:1}

2.右边{float:left;width:calc(100% - 218px);}

2. Droite {float:left;width:calc(100% - 218px);}🎜
小葫芦

Dernière pièce{

width:calc(100% - 218px);
float: left;

}

大家讲道理

Le pourcentage est correct

过去多啦不再A梦

flex est une solution, mais il faut souvent qu'il soit désormais compatible avec les navigateurs bas de gamme tels que IE8, et flex n'est pas possible.
Proposer une autre solution :
Structure :

<p class="box">
    <p class="left">left</p>
    <p class="right">right</p>
</p>

Style :

.left, .right {
        height: 30px;
    }
    .left {
        float: left;
        width: 200px;
        background: #f90;
    }
    .right {
        background: #369;
        overflow: hidden;
    }
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal