前言
1、通过 BFC 实现
<div class="wrap"> <div class="left"> <p>Hello World</p> <p>Good Night</p> </div> <div class="right"> <p>Say Hello To Tomorrow</p> <p>Say Goodbye To Yesterday</p> </div> </div>
.wrap { /* BFC */ overflow: hidden; zoom: 1; /* compatible with IE6 */ } .left { background-color: lightskyblue; /* float + margin */ float: left; margin-right: 20px; } .right { background-color: deepskyblue; /* BFC */ overflow: hidden; zoom: 1; /* compatible with IE6 */ }
2、通过 Flex 实现
<div class="wrap"> <div class="left"> <p>Hello World</p> <p>Good Night</p> </div> <div class="right"> <p>Say Hello To Tomorrow</p> <p>Say Goodbye To Yesterday</p> </div> </div>
.wrap { /* flex container */ display: flex; } .left { background-color: lightskyblue; /* flex item */ flex-grow: 0; /* margin */ margin-right: 20px; } .right { background-color: deepskyblue; /* flex item */ flex-grow: 1; }
3、通过 Grid 实现
<div class="wrap"> <div class="left"> <p>Hello World</p> <p>Good Night</p> </div> <div class="right"> <p>Say Hello To Tomorrow</p> <p>Say Goodbye To Yesterday</p> </div> </div>
.wrap { /* grid container */ display: grid; grid-template-columns: auto 1fr; grid-column-gap: 20px; } .left { background-color: lightskyblue; } .right { background-color: deepskyblue; }
