<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列等高布局</title> <style type="text/css"> body{ margin: 0; overflow: hidden; } ul{ margin: 0; padding: 0; list-style: none; } .out{ overflow: hidden; width: 100%; height: 100%; } .main{ margin: 0 210px; background-color: lightgreen; } .left{ width: 200px; float: left; background-color: pink; } .right{ width: 200px; float: right; background-color: pink; } .main,.left,.right{ margin-bottom: -9999px; padding-bottom: 9999px; } </style> </head> <body> <div class="out"> <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, ut!</div> <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus rem laudantium nam, temporibus sit cumque, asperiores eveniet praesentium omnis vero saepe dicta. Possimus facere ipsum, voluptas aliquid illo veniam?</div> <div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ea hic quaerat neque reprehenderit doloremque minima architecto, ipsa sed temporibus recusandae vitae impedit cum pariatur aspernatur similique dolorem libero a minus eveniet dolor sapiente! Illo minus dicta est! Accusantium, assumenda amet unde beatae cumque molestias. Numquam aut laudantium fugit, similique tempora minima vitae veniam obcaecati dolor, nihil rerum enim! Accusamus soluta facilis nihil, maiores eos esse quo dignissimos, nisi illo molestias aliquam, beatae quibusdam. Similique nesciunt velit eius aut aperiam est temporibus voluptatem ullam omnis, recusandae rerum vel incidunt nihil, voluptatum excepturi, accusamus ducimus totam quasi? Minima maxime tempore labore.</div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 三列等高布局 喜欢 (0)or分享 (0)
