前端 - CSS 一行人分成兩列

Question

設計圖上規定左邊塊的長度是218px，但是我沒有辦法確定同一行後一塊的長度，我期望後一塊可以自動填滿當前行，求教

目前第一塊的css樣式就是：

   float: left;
   width: 218px;

效果圖：

#

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 你值得擁有 但是記得加上前前綴

Answer 2

左邊的塊可以position: absolute;絕對定位。右邊的區塊直接margin-left: 218px;然後display:block;

Answer 3

1.父級{display:flex;}，右邊{flex:1}

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

Answer 4

後一塊{

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

}

Answer 5

百分比可以吧

Answer 6

flex是一種解決辦法，但很多時候現在要求相容IE8等低端瀏覽器，flex就不行了。
提供另外一個解決方案：
結構：

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

樣式：

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