Bahagian hadapan - CSS satu baris dibahagikan kepada dua lajur

Question

Lukisan reka bentuk menetapkan bahawa panjang blok kiri ialah 218px, tetapi saya tidak mempunyai cara untuk menentukan panjang blok seterusnya dalam baris yang sama. Saya berharap blok terakhir boleh mengisi baris semasa secara automatik nasihat

Gaya css semasa potongan pertama ialah:

   float: left;
   width: 218px;

Rendering:

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 anda layak tetapi ingat untuk menambah awalan

Answer 2

Blok di sebelah kiri boleh diletakkan secara mutlak: kedudukan: mutlak; Blok di sebelah kanan berada di margin-kiri secara langsung: 218px; dan kemudian display:block;

Answer 3

1 Induk {display:flex;}, kanan {flex:1}{display:flex;}，右边{flex:1}

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

2 Kanan {float:left;width:calc(100% - 218px);}🎜

Answer 4

Sekeping terakhir{

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

}

Answer 5

Peratusan okay

Answer 6

flex ialah penyelesaian, tetapi banyak kali ia kini diperlukan untuk serasi dengan penyemak imbas rendah seperti IE8, jadi flex tidak boleh dilakukan.
menyediakan penyelesaian lain:
Struktur:

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

Gaya:

.left, .right {
        height: 30px;
    }
    .left {
        float: left;
        width: 200px;
        background: #f90;
    }
    .right {
        background: #369;
        overflow: hidden;
    }