Front-end - CSS une ligne divisée en deux colonnes

Question

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 :

Answer 1

<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

Answer 2

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;

;

Answer 3

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

Answer 4

Dernière pièce{

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

}

Answer 5

Le pourcentage est correct

Answer 6

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