<div class="parent">    <div class="left">        <p>left menu</p>    </div>    <div class="right">        <li>right item1</li>        <li>right item2</li>        <li>right item3</li>    </div></div>

html, body, p, ul, li {    margin: 0;    padding: 0;}div.left {    background: #d2e3e3;}div.right {    background: #77DBDB;}

.left {    float: left;    width: 100px;}.right {    margin-left: 100px; // 或 overflow: hidden}

.parent {    display: table;    width: 100%;    table-layout: fixed; // https://blog.csdn.net/qq_36699230/article/details/80658742    .left, .right {        display: table-cell;    }    .left {        width: 100px;    }}

.parent {    display: flex;    .left {        width: 100px; // 或 flex: 0 0 100px;    }    .right {        flex: 1;    }}

.parent {    display: table;    width: 100%;    // 設置table-layout: fixed; 會使單元格等寬, 因此此處不設置    .left, .right {        display: table-cell;    }    .left {        width: 0.1%; // 寬度設置一個極小值, 由于沒有設置table-layout: fixed; 所以寬度由內容決定        white-space:nowrap;    }}

<div class="parent">    <div class="column">        <p>1</p>    </div>    <div class="column">        <p>2</p>    </div>    <div class="column">        <p>3</p>    </div>    <div class="column">        <p>4</p>    </div></div>

html, body, div, p {    margin: 0;    padding: 0;}.parent {    width: 800px;    border: 1px solid coral;    .column {        height: 30px;        background: bisque;        p {            background: #f0b979;            height: 30px;        }    }}

.parent {    margin-left: -20px;    overflow: hidden;    .column {        float: left;        width: 25%;        padding-left: 20px;        box-sizing: border-box;    }}

.parent {    display: flex;    .column {        flex: 1;        &+.column {            margin-left: 10px;        }    }}

.parent {    display: flex;}.left, .right {    flex: 1;}