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