效果1
html
<div class="grid-container outline"> <div class="row"> <div class="col-1"><p>col-3</p></div> <div class="col-2"> <div class="col-3"></div> <div class="col-4"></div> </div> </div> </div>
css
/* 容器 */ .grid-container{ width: 100%; max-width: 1600px; /* box-sizing: border-box; */ } /* 清楚浮动 */ .row:before, .row:after { content:""; display: table ; clear:both; } /* 盒子的基础样式 */ [class*='col-'] { float: left; min-height: 1px; height: 400px; width: 16.66%; box-sizing: border-box; } .col-1{ width: 50%; background-color: blue;} .col-2{ width: 50%; background-color: pink; padding: 15px; box-sizing: border-box} .col-3{ width: 100%; height: 44%; margin: 0 0 2%; background-color: green;} .col-4{ width: 100%; height: 44%; margin: 2% 0 0; background-color: #00FFFF;}
效果2
html
<div class="grid-container outline"> <div class="row"> <div class="col-5"><p>col-5</p></div> <div class="col-6"><p>col-6</p></div> <div class="col-5"><p>col-5</p></div> <div class="col-6"><p>col-6</p></div> <div class="col-5"><p>col-5</p></div> </div> </div>
css
/* 容器 */ .grid-container{ width: 100%; max-width: 1600px; /* box-sizing: border-box; */ } /* 清楚浮动 */ .row:before, .row:after { content:""; display: table ; clear:both; } /* 盒子的基础样式 */ [class*='col-'] { float: left; min-height: 1px; height: 400px; width: 16.66%; box-sizing: border-box; } .col-5{ width: 20%; height: 60px; text-align: center; background-color: blue; margin-top: 15px;} .col-6{ width: 20%; height: 60px; text-align: center; background-color: pink; margin-top: 15px;}