左列定宽float +margin<style> .parent { background-color: grey; width: 300px; height: 200px; } .left { float: left; width: 100px; //需要定宽 height: 100%; background-color: skyblue; } .right { margin-left: 110px; background-color: greenyellow; }</style><html> <div class=“parent”> <div class=“left”> <p>left</p> </div> <div class=“right”> <p>right</p> <p>right</p> </div> </div></html>absolute + margin.parent{ position: relative; } .side{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } .main{ background:#0FC; margin-left:300px; }margin-left 负值 + float<div class=“parent”> <div class=“left”> <p>left</p> </div> <!– html部分在这个地方进行了添加，使用right-fix把原有结构包裹住了 –> <div class=“right-fix”> <div class=“right”> <p >right</p> <p>right</p> </div> </div></div>.left{ float: left; width: 100px; position: relative; }.right-fix{ float: right; width: 100%; margin-left: -100px;}.right{ margin-left: 120px;}BFC<style> .parent { background-color: grey; width: 300px; height: 200px; } .left { float: left; width: 100px; //需要定宽 height: 100%; margin-right: 10px; background-color: skyblue; } .right { height: 100%; background: #0FC; overflow: hidden; padding: 20px; box-sizing: border-box; }</style><html> <div class=“parent”> <div class=“left”> <p>left</p> </div> <div class=“right”> <p>right</p> <p>right</p> </div> </div></html>table 父元素定宽高//第一种，同时可以实现等高布局<style> .parent { background-color: grey; width: 300px; height: 200px; display: table; table-layout: fixed; } .left { display: table-cell; width: 100px; background-color: skyblue; border-right: 10px solid transparent; background-clip: padding-box; //设置列之间的间距 } .right { display: table-cell; background-color: greenyellow; }</style><html> <div class=“parent”> <div class=“left”> <p>left</p> </div> <div class=“right”> <p>right</p> <p>right</p> </div> </div></html>//第二种方法<style> .parent { background-color: grey; width: 300px; height: 200px; display: table; table-layout: fixed; } .left-container { display: table-cell; width: 100px; } .left { margin-right: 10px; background-color: skyblue; } .right { display: table-cell; background-color: greenyellow; }</style><html> <div class=“parent”> <div class=“left-container”> <div class=“left”> <p>left</p> </div> </div> <div class=“right”> <p>right</p> <p>right</p> </div> </div></html>flex<div class=“parent”> <div class=“side”></div> <div class=“main”></div></div>.parent{ display: flex;}.side{ width: 200px; height: 200px; margin-right: 10px; background: #555;}.main{ flex: 1; background: #ddd;}