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