Frontend – CSS, eine Zeile, aufgeteilt in zwei Spalten

Question

Die Konstruktionszeichnung gibt an, dass die Länge des linken Blocks 218px ist, aber ich habe keine Möglichkeit, die Länge des nächsten Blocks in derselben Reihe zu bestimmen. Ich hoffe, dass der letztere Block die aktuelle Reihe automatisch füllen kann Rat

Der aktuelle css Stil des ersten Stücks ist:

   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 你值得拥有 但是记得加前前缀

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