html css float 两栏 三栏布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0 } ul { list-style: none; } /* body { background: url('bg.jpg') no-repeat 0 0/100%; } */ .clearfix::after { content: ''; display: block; clear: both } .container { padding: 20px; border: 1px solid #333; overflow: hidden; } .container .left { float: left; width: 200px; background-color: red; margin-right: 10px; height: 10000px; margin-bottom: -9990px; /* 此最后两行实现左右栏高度随与main高度等高*/ } .container .right { float: right; width: 200px; background-color: green; margin-left: 10px; height: 10000px; margin-bottom: -9990px; } .container .main { background-color: blue; overflow: hidden;/* main宽度随视口宽度自适应*/ } </style> </head> <body> <div class="container clearfix"> <aside class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam quibusdam perferendis odit similique nobis doloremque! Expedita architecto temporibus veritatis quam, facere quas beatae, nihil maiores repudiandae corporis eum, aliquid accusamus tenetur odit nisi ipsum. ?</aside> <aside class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic ut porro, nobis labore velit, repellat, iste excepturi vel modi sit maiores? Veniam pariatur quod vitae cumque impedit alias adipisci corporis laudantium commodi assumenda sint fuga modi ipsam, distinctio vel. Quam?</aside> <div class="main"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic perspiciatis laborum ullam sapiente aliquam officiis itaque facilis pariatur sint, et minima inventore delectus obcaecati sed voluptatibus rerum assumenda tempora optio magni, saepe nesciunt, deleniti cumque quis ab! Molestias atque voluptatibus magni laborum magnam distinctio quos incidunt repudiandae quis, sapiente consectetur voluptatum, assumenda dolorum optio recusandae suscipit illum sint doloribus facilis ad. Libero nisi, sit iure dolor accusantium minima nemo sed reprehenderit veritatis tempore asperiores impedit tenetur non ut repellat ab doloremque earum id. Ad beatae, corporis quisquam iste ab voluptates dignissimos impedit natus ipsa fuga deleniti porro ullam veritatis numquam, quis accusamus odit itaque praesentium debitis quae recusandae ducimus aut optio! Blanditiis quia corrupti consequuntur aperiam praesentium eveniet sed facilis, maxime impedit quae molestiae minima aliquid asperiores atque aut velit excepturi nemo, fugiat, quidem iure? Ratione reprehenderit natus cupiditate eius nobis pariatur esse voluptates optio at fuga? Eius quo quisquam deserunt provident harum magni, blanditiis est libero error et fuga dolore pariatur amet id labore excepturi consequuntur ea distinctio ex reiciendis dolor tenetur cum cumque? Asperiores, accusamus laboriosam vitae vel voluptate, quos velit quo ut ipsum quod ex. Officia corrupti ut dolore magnam eligendi nihil nisi pariatur voluptate. Corrupti pariatur placeat consequatur veniam. Deleniti, voluptas aperiam aliquam harum quia praesentium! Quibusdam asperiores iste commodi suscipit! Non possimus soluta impedit praesentium quo excepturi cum consectetur delectus quidem minima? Ad doloremque odio, ipsum praesentium voluptatum, mollitia ut laudantium maxime ratione tempora incidunt saepe quas eum. Quo, sint excepturi suscipit omnis possimus dolorum est voluptas fugiat nulla error et beatae quibusdam ea expedita incidunt? Vel expedita debitis cumque quidem, harum tempore culpa sed quibusdam nisi nulla nam ea hic illum possimus numquam odio provident aperiam deserunt accusantium sit assumenda suscipit aut corrupti porro. Molestiae, quos nisi quibusdam enim reiciendis ullam laboriosam blanditiis mollitia? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, excepturi consectetur sapiente delectus vitae praesentium blanditiis eaque, hic dicta sed beatae nostrum amet. Harum, sed quis maxime debitis corrupti cumque obcaecati repellendus necessitatibus repudiandae tempora delectus odio qui dignissimos earum voluptatem aspernatur quibusdam accusamus voluptas quam quidem enim magnam. Ad eum, quo tempora consectetur esse quaerat doloribus id odit ducimus, eos error tenetur voluptatem iure quis atque adipisci voluptates itaque. Odio ipsa repellat, voluptates voluptatem ad pariatur maiores illum atque explicabo earum placeat. Voluptatem rerum culpa aliquid a ad omnis perspiciatis non deleniti voluptate ut, error nesciunt enim pariatur! Eius cum impedit, iusto dicta architecto autem rem. Saepe deserunt quas nulla magni, tempore aliquam obcaecati vel, dolore ex asperiores, quia beatae iusto reprehenderit facere earum itaque exercitationem explicabo corporis facilis nesciunt! Rerum officiis porro mollitia officia quae consequatur tempora, nihil quibusdam. Ex officia numquam eaque dicta voluptatem ab magni natus praesentium sit sint eos nobis voluptatibus inventore ut cum voluptates quisquam dignissimos repellat exercitationem pariatur beatae vel, molestiae ea sunt. Dicta unde inventore iste explicabo quos id praesentium qui, tempore consectetur voluptas alias amet nihil vero iure sequi facere, quas porro vitae. Quia eveniet aliquid similique provident quod corporis laboriosam voluptas! Iusto suscipit expedita necessitatibus vitae facilis autem esse aperiam quis excepturi error illo, molestiae vero aut at earum. Laborum et maxime, illum veniam non labore tenetur illo reprehenderit ab sunt aliquam officiis totam inventore corrupti perferendis. Adipisci sapiente maxime neque iste autem dicta dolore nihil deleniti consequuntur illo, dignissimos recusandae, porro incidunt! Ab atque tempora quaerat inventore doloribus! Necessitatibus eaque rerum sapiente deserunt excepturi qui cupiditate quia dolor obcaecati ex commodi, praesentium ipsam fugit alias ea doloremque quis minus rem et laboriosam magnam. Ab, excepturi! Repudiandae quaerat, iure illo architecto eum, voluptatibus quas laudantium illum corrupti facere quod libero! </div> </div> </body> </html>