前端 - CSS 一行分成两列

问题描述

设计图上规定左边块的长度是218px，但是我没有办法确定同一行后一块的长度，我期望后一块可以自动填满当前行，求教

目前第一块的css样式就是：

float: left; width: 218px;

效果图：

问题解答

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

左边的块可以position: absolute;绝对定位。右边的块直接margin-left: 218px;然后display:block;

1.父级{display:flex;}，右边{flex:1}

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

后一块{

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

}

百分比可以吧

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