1.圣杯 float:left+负margin-left+ padding+relative
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{min-width: 600px;} .main{padding: 0 200px 0 200px} .main div{float: left;height: 300px;} .left{ width: 200px; margin-left: -100%; left: -200px; position: relative; background: skyblue; } .right{ width: 200px; margin-left: -200px; right: -200px; position: relative; background: tomato; } .mid{width: 100%;background: springgreen;} </style> </head> <body> <div class="main"> <div class="col mid"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore vero tempore excepturi voluptates magni cumque debitis deleniti ab fuga at, odit rem ipsum optio! Assumenda corrupti minima quis eius ducimus. </div> <div class="col left"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia officiis dolorem, similique dolores quisquam velit fugiat id omnis tempora facilis provident voluptates sint et placeat assumenda unde quam odio aspernatur. </div> <div class="col right"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam odio ipsum, nihil ex iusto quidem at nisi vel corporis enim ea illum necessitatibus ut repellendus non voluptas quaerat in autem? </div> </div> </body> </html>
2.双飞翼 float:left+负margin-left+ margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{min-width: 600px} .col{height: 300px;float: left} .left{width: 200px;margin-left: -100%;background: salmon;} .right{width: 200px;margin-left: -200px;background: seagreen;} .mid{width: 100%;background: royalblue} .wrap{margin: 0 200px 0 200px;} </style> </head> <body> <div class="main"> <div class="col mid"> <div class="wrap"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad error, voluptatibus ipsa corrupti maxime nemo reiciendis beatae nisi. Laboriosam culpa amet quam doloribus corporis sit assumenda soluta odio laudantium quibusdam? </div> </div> <div class="col left"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quis reprehenderit dolorem, blanditiis, sed odio corrupti dignissimos magni fuga consequuntur, sit nesciunt quidem eveniet unde totam. Minima nesciunt asperiores libero? </div> <div class="col right"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam tempora, dicta, cum sit modi architecto id eum aperiam quisquam, eaque numquam at ea possimus odit error consequuntur! Iste, libero nisi. </div> </div> </body> </html>
3.flex flex:1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{min-width: 600px;} .main{display: flex} .mid{flex: 1;background: salmon;} .left{width: 200px;background: slateblue;} .right{width: 200px;background: violet;} </style> </head> <body> <div class="main"> <div class="col left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ducimus distinctio fugit temporibus nisi asperiores molestias quos quo doloribus, aperiam consequuntur sapiente fuga alias dolores quas eaque vel, hic amet. </div> <div class="col mid"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed cupiditate quaerat nobis quis. Veniam inventore cum ex perferendis eos, ducimus unde corrupti, veritatis quas magni vel nostrum? Aliquid, necessitatibus! Aliquam? </div> <div class="col right"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt accusamus in magnam modi ab repudiandae voluptas incidunt dolorum quia laboriosam soluta voluptate, error quae labore, ex quidem. Fugit, voluptatibus aspernatur! </div> </div> </body> </html>