构造三栏布局

最新推荐文章于 2024-05-19 17:34:30 发布

march on_6

最新推荐文章于 2024-05-19 17:34:30 发布

阅读量572

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/yyh619/article/details/121663086

版权

三栏布局

题意：

写一个三栏布局，中间自适应，两边固定。

方法一：定位

1.使用相对定位处理两边的盒子；

2.对中间盒子的宽度不限定；

3.控制中间盒子margin使其不被挡住。

<!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>三栏布局</title>
    <style>
.sanlan1{
    height: 100%;
    width: 200px;
    background-color: blue;
    position: absolute;
    left: 0;
    top: 0;

}
.sanlan3{
    height: 100%;
    width: 200px;
    background-color: rgb(129, 42, 83);
    position: absolute;
    right: 0;
    top: 0;
} 
.sanlan2{
    height: 100%;
    margin:0 200px;
    background-color: rgb(12, 42, 83);
} 
    </style>
</head>
<body style="position:relative;">
    <div class="sanlan1"></div>
    <div class="sanlan2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi unde repudiandae laborum excepturi! At, quos, deleniti porro beatae dolores accusamus eaque vel unde culpa rem dolorum nam recusandae rerum quis mollitia cum? Esse tempore ipsam temporibus quisquam asperiores unde, ullam itaque cupiditate ut sapiente! Accusamus ipsam, porro, nostrum, excepturi quis officia labore mollitia possimus molestiae numquam repudiandae non sequi autem sed fugit dolor dignissimos omnis aliquid vero eligendi unde! Distinctio sapiente est molestias vero molestiae recusandae magnam in earum. Sunt quaerat quos esse, praesentium aliquam facere veniam aspernatur distinctio dicta. Corporis itaque id porro iste pariatur et rerum doloremque, autem excepturi qui non corrupti vel, magni libero odit tenetur a quis in odio eum sapiente provident quam! Optio labore, consequuntur incidunt qui cumque aliquam repellendus, obcaecati est iste voluptate delectus, non ab commodi nesciunt nam eius fugiat voluptates aspernatur quos quod magnam consequatur esse perspiciatis inventore? Hic nobis amet odit eos magnam. Quia doloremque corporis sit. Maxime suscipit explicabo veniam accusantium saepe quidem voluptatibus rerum error, eum impedit quaerat optio deleniti eius eligendi accusamus praesentium totam, dignissimos laboriosam officiis possimus, distinctio repudiandae consectetur itaque. Molestias quidem quaerat nesciunt corporis pariatur rem, ipsam totam explicabo nihil perferendis porro expedita debitis voluptatem voluptate unde sequi et architecto dolorum vero magnam. Consectetur illo nulla ut explicabo commodi, similique quis, amet aliquid architecto atque iusto dolore mollitia incidunt perferendis recusandae. Ex libero esse et quae modi natus, corporis perspiciatis ipsum facilis rerum, delectus animi quibusdam? Ad porro hic repellat ullam nam nihil laborum ut iste soluta architecto omnis, aut atque delectus dolore pariatur earum tempora mollitia magnam? Soluta obcaecati architecto vero vel aliquam sunt amet perspiciatis eos voluptatem possimus, necessitatibus autem sint. Et dolore cupiditate sequi debitis quidem temporibus nulla suscipit commodi voluptatum, cumque, quam aperiam amet labore eveniet aliquid harum, qui quis voluptate atque. Incidunt harum nulla reiciendis hic odio voluptatum excepturi! Quidem vitae a sint ad quo nostrum nam aspernatur ut, ab quos earum beatae, praesentium corporis cumque cupiditate officia ratione exercitationem dolorum quam tempore esse! Quia laboriosam sint fuga consequatur odit, mollitia voluptatem veritatis nihil at. Nesciunt impedit saepe quam dolorum, recusandae tenetur iusto porro. Laboriosam exercitationem consequatur a voluptatibus recusandae dicta aliquam excepturi saepe quis. Officiis, quo obcaecati quos reiciendis vero culpa necessitatibus adipisci quidem perspiciatis nobis, aliquam asperiores quisquam, dolores eligendi a repudiandae pariatur. Eligendi esse vero explicabo iste optio libero dolore numquam voluptates harum provident fugiat laboriosam minus molestias dolorum labore saepe minima reiciendis eos nulla quisquam, totam facilis aliquam eaque quo. Deleniti, itaque. Voluptatibus, repudiandae voluptatum nostrum amet unde neque magnam dolore perferendis et rem quo, vitae nobis dolores autem laudantium praesentium sint, nulla impedit illum quis inventore saepe possimus? Doloribus voluptatum aliquam, cupiditate temporibus culpa dignissimos magni magnam iusto doloremque quo accusamus numquam nobis voluptatibus in cumque, provident facere, aliquid ullam asperiores eveniet. Architecto corrupti consequatur veniam laboriosam, reiciendis voluptas? Fugiat obcaecati voluptatibus dignissimos accusantium quae facere laboriosam numquam quod iusto voluptatem quas commodi architecto nobis, perspiciatis minus provident soluta rem, assumenda atque illo. Optio accusamus deleniti porro error consequuntur tempore nam saepe corrupti quas cumque quasi laborum temporibus iste, aspernatur culpa, odio unde aperiam voluptas. Rem repellat ea accusantium enim eius. Voluptatem velit architecto amet, veritatis commodi sint nulla, molestias quaerat necessitatibus accusamus ipsum iure ipsam distinctio ducimus officia repellat voluptatum ad, corrupti aliquam eius? Fuga reiciendis, laudantium ipsa fugiat aspernatur repudiandae nihil voluptatibus qui ad obcaecati quas ratione assumenda animi odit doloremque corrupti vitae suscipit modi voluptatum accusamus voluptates iste. Dolor culpa a cupiditate in aut saepe expedita! Praesentium eum assumenda neque sit? Nemo nobis soluta placeat ullam corrupti voluptatibus saepe excepturi error cum, natus neque voluptate in laborum amet, possimus minus sapiente doloribus quae vitae debitis odio eaque laboriosam exercitationem? Id iste, blanditiis consectetur qui corporis, enim maxime, vel quod omnis similique a perspiciatis unde. Quas modi, voluptatum doloremque inventore ea, sunt animi ex sed perferendis dolorum officia iusto pariatur, accusamus excepturi porro exercitationem ducimus. Eius quaerat atque consequuntur architecto dignissimos repellendus, dolores veniam, molestias minus exercitationem voluptatum amet commodi tempore error tempora earum alias quia, ea reprehenderit. Esse, ducimus culpa numquam laudantium nam reprehenderit ipsa nulla hic aspernatur voluptate facere veniam soluta iusto beatae ab at cupiditate distinctio dolor, neque, dolores labore sapiente. Delectus praesentium nulla quae ut, corporis architecto laboriosam aliquid harum mollitia iusto id quidem officiis iste unde, non odit quas ex vitae impedit. Consequatur officiis deserunt ad nihil distinctio, cupiditate aliquam et reprehenderit autem cum dignissimos quibusdam nemo ducimus ratione. Molestiae velit tenetur eligendi animi et quam explicabo provident est possimus quisquam rerum soluta iste ducimus, eum voluptates libero? Sapiente quia placeat sequi sunt aperiam excepturi eius cum beatae fugiat alias tempore, est ad tenetur earum aut qui voluptates doloribus. Suscipit aliquam officiis numquam fugiat in, facere earum magnam mollitia voluptatum ipsum corporis porro tempora praesentium sit omnis tenetur iste perferendis delectus exercitationem minus placeat dolorum illo unde. Esse repellat assumenda consequuntur, beatae earum quos doloribus veritatis quas ullam ipsa distinctio commodi blanditiis ipsum aspernatur dolore hic ut recusandae autem rem dolores dignissimos eaque eum. Atque dignissimos laborum nemo. Dolorem veritatis dolores molestias ipsum doloribus temporibus in dignissimos hic error? Quaerat omnis ut, recusandae perspiciatis voluptatum natus at sed officiis? Necessitatibus quis nostrum voluptatibus tempora doloribus quasi ab. Ab, possimus ipsum. Nihil est illo magnam dignissimos. Sequi beatae id pariatur quo deleniti corrupti magnam dicta alias autem. Reprehenderit exercitationem natus quidem qui, possimus commodi animi perferendis? Consectetur neque minus cum laborum deleniti quod porro accusantium cupiditate in vero fuga rerum ex, sed atque illo dolores minima iusto est, excepturi provident quae, necessitatibus labore? Possimus ut perferendis ipsum debitis sapiente atque beatae amet earum animi nulla dolorum obcaecati velit eveniet sequi, delectus facere, nesciunt unde rerum dicta voluptas commodi et, corrupti tempore. Asperiores quis incidunt sapiente! Iure veniam sequi, velit nulla, voluptatum corrupti, accusamus natus ullam deserunt laboriosam ea? Consequuntur molestiae saepe vitae, in architecto cupiditate incidunt ab iste? Distinctio itaque suscipit delectus qui necessitatibus perspiciatis a, cumque laudantium consequuntur reiciendis quos iure molestiae maiores, ipsam repudiandae tempora doloribus provident!
    </div>
    <div class="sanlan3"></div>
</body>
</html>

方法二：浮动

1.使用左右浮动处理两边盒子；

2.对中间盒子的宽度不限定；

3.控制中间盒子margin使其不把两边盒子挡住。

注意：浮动盒子在包含块中排列会避开常规流；常规流盒子会无视浮动盒子。

<!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>三栏布局2</title>
</head>
<style>
     .aa{
        height:2000px;
        width: 300px;
        float: left;
        background-color: beige;
    }

    .cc{
        height: 2000px;
        width: 300px;
        float: right;
        background-color: blue;
    } 

    .bb{
         height:100%; 
        background-color: brown;
        margin: 0 300px;
    } 

</style>
<body style="min-width: 700px;">
    <div class="aa"></div>
    <div class="cc"></div>
    <div class="bb"><!--必须放最后一个-->
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore saepe qui excepturi natus perferendis sit deleniti in, earum et expedita nostrum officiis, esse numquam cum dolore, beatae eveniet reiciendis repellat hic laudantium corporis ipsa maxime! Quas soluta esse sunt cumque ut voluptate sit magni voluptatum eius dolor inventore ratione dolores nemo praesentium ipsum vitae, at officia tempore incidunt? Error a quo cupiditate omnis tenetur magni saepe culpa laudantium voluptate ratione sed odio vel unde aut hic voluptas officiis ducimus, harum vero nostrum, cumque odit adipisci iste nam! Cumque at, provident quos nesciunt, aspernatur, dolores nisi ullam eaque quisquam nihil animi sapiente ab facere ducimus excepturi libero ipsum sed. Exercitationem voluptate molestiae minus quam, atque vel deleniti inventore dolorem neque fugiat eaque vero facere error ea eligendi dolore doloribus itaque cupiditate ducimus at aliquid! Doloribus blanditiis atque cum provident vel consequatur quis dolorem odit laborum est, autem perspiciatis? Ea voluptatibus ab dicta eos. Soluta repudiandae vitae iste repellat nesciunt nemo nisi, obcaecati tempora? Laudantium qui cumque libero esse fuga laborum temporibus consequatur ipsam quod asperiores reprehenderit eveniet explicabo voluptatum consequuntur accusantium praesentium, quae nemo necessitatibus beatae veniam aliquid modi excepturi aliquam. Corrupti amet tenetur laudantium dicta laborum nisi, neque porro cumque doloribus aut corporis inventore sequi ipsum asperiores repellendus voluptatem error unde dignissimos ad officiis sit nostrum pariatur blanditiis? Ipsam debitis possimus iure, similique asperiores sint, a nisi cumque placeat natus vero nemo fugit necessitatibus omnis provident laudantium vel nam commodi. Quia nemo, magni impedit fugiat suscipit voluptates ab cupiditate dicta dolore, id sapiente culpa labore, voluptas velit molestiae cum voluptate nihil laborum voluptatum nostrum dignissimos. Perspiciatis voluptatum nulla aut sint expedita amet quia explicabo eaque voluptas blanditiis eveniet, voluptatibus sit, assumenda ex corporis aliquid tenetur cumque error! Explicabo, voluptates omnis eligendi possimus dicta, culpa expedita ab repellendus aperiam quos aspernatur commodi, perferendis rerum nihil in. Corporis explicabo facilis dolor quia ipsam, culpa dicta laudantium sit nesciunt eaque. Reiciendis exercitationem beatae possimus eveniet sunt quos assumenda quibusdam amet voluptatum rerum facilis maxime minima quod pariatur delectus non dolore quis placeat debitis hic fugiat, optio omnis ducimus. Maiores deserunt at odit et enim ullam porro, officia dolores, modi, commodi assumenda. Vel praesentium, consequuntur quia labore dolores animi, quas non cupiditate eos repellendus quo aliquam! Quibusdam sequi, illo odit quaerat nesciunt consequuntur dolores dolorem a in dolor dignissimos consequatur, officia voluptatum enim ipsa dolorum et tempore natus? Reiciendis tempora accusamus temporibus iste. Vitae totam voluptatibus delectus ex dicta natus eligendi cum, perspiciatis molestiae possimus, recusandae labore ipsa earum. Repudiandae ad aliquam veritatis possimus obcaecati. Similique porro optio, facere hic commodi quidem totam unde ea quos esse nemo ducimus reiciendis deleniti nihil quia itaque atque cupiditate odio laborum sit, iste doloribus iusto. Quibusdam ex vel cum ut sit veniam doloremque ducimus ea voluptates. Quos, accusantium dolor corrupti debitis alias culpa autem fugit quasi nisi consequatur repudiandae repellat placeat aspernatur consectetur neque exercitationem ducimus iure illo deleniti! Architecto soluta sequi debitis nam exercitationem ex enim ullam quas ipsa qui rerum, ducimus, culpa corrupti quod, consequuntur voluptas tempora aspernatur libero dolores. Adipisci, totam ea vel dicta error in sunt optio, doloremque sit eaque voluptatum ad nostrum dolorem? Voluptates omnis ipsam tempora quisquam illo dignissimos quam rerum. Modi, perspiciatis! Rerum dignissimos rem vitae excepturi, soluta laborum eos delectus voluptas error porro enim reprehenderit debitis tenetur sunt? Dicta quisquam distinctio autem doloremque quaerat molestiae sint quia dolor eligendi, obcaecati asperiores recusandae impedit ad vitae quae animi provident nisi dolores consequatur beatae est eveniet. Esse iusto eius minima facere! Veniam quam hic nemo sapiente eligendi suscipit quia dolores exercitationem! Quisquam, pariatur possimus tempore voluptatum nam optio veritatis. Tempore sequi aut nulla rerum cumque modi dolores illum non, minus ea reiciendis quasi, cum odit placeat fugit dolor eos hic quis porro omnis, suscipit illo exercitationem ipsa. Autem, ipsam doloribus! Voluptatum magni eum eos corrupti perspiciatis nostrum incidunt explicabo ad beatae culpa, velit esse aperiam nemo? Assumenda laboriosam nam blanditiis hic deserunt rem consequuntur similique? Modi, nihil iure at omnis quidem illum, nemo quam accusamus dolorum tempore vitae? Laboriosam modi amet ullam similique nemo unde autem minus corporis ab, aperiam eum. Expedita atque repudiandae fuga nesciunt quia vel. Autem odio voluptatum quis eum labore tempora in assumenda ex accusamus, sapiente, laboriosam inventore ducimus voluptates dolorum qui? A ut obcaecati nostrum unde amet praesentium vero dolore velit quasi voluptatum beatae voluptatibus quod corrupti, quis atque et, cupiditate, dolorem totam nam repellat repudiandae quidem cum dignissimos. Illum culpa exercitationem harum in aliquam ipsum eum distinctio at magnam id sunt dolorum ullam, error labore consectetur quasi dignissimos corporis quod voluptas nam. Repellat minus saepe molestias. Quisquam commodi dolor labore voluptatem eaque necessitatibus sit ducimus pariatur assumenda minima vero quia modi perferendis enim exercitationem blanditiis, mollitia iure omnis reprehenderit facere maxime numquam praesentium. Sunt, velit. Aliquid neque velit expedita quaerat nam nemo quas quis, tenetur magnam eaque soluta, aliquam deserunt recusandae exercitationem atque fugit maiores natus nulla delectus vitae animi similique in molestias! Nulla a maiores commodi nostrum dignissimos assumenda, eligendi aperiam deleniti minus est ducimus porro ea fugiat nam eos ad. Corrupti voluptatibus, dicta doloribus enim consequatur incidunt optio et. Vero illum odio laboriosam modi libero nam facere repellendus quia ullam iure placeat officia ut labore veniam vitae, consequuntur neque numquam, id quam similique eum tempore sapiente. Incidunt ullam maiores consectetur nemo temporibus? Qui fuga obcaecati molestiae quia explicabo animi? Ducimus, suscipit? Totam accusamus cumque, deleniti vitae earum quae odit quo asperiores? Autem, dolores quam? Tenetur ratione accusamus ex maxime molestiae veritatis ab optio non reprehenderit aliquid modi, expedita, debitis inventore beatae recusandae quo amet! Necessitatibus possimus consequuntur perspiciatis, ut maxime quam? Temporibus error magnam porro maiores distinctio adipisci fugit? Modi aut rem saepe, soluta, similique quaerat est fugiat mollitia iste, minima quis. Qui, tempore fugit. Sint deleniti minima odio. Adipisci quo labore quidem, maxime repellendus officia libero reiciendis velit illum consequatur sunt sed dolorum totam iste similique explicabo quasi praesentium voluptatibus. Consequatur quam placeat saepe deserunt incidunt aperiam modi deleniti soluta, quae fugiat sint amet ipsum molestiae iusto dolor odio? Sed, impedit sint!
    </div>
</body>
</html>

方法三：flex布局

1.使主体成为一个弹性盒子；

2.固定两边盒子宽度；

3.设中间盒子flex:1，使其它盒子等分剩余空间。

<!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>三栏布局3</title>
    <style>
.sanlan1{
    height: 100%;
    width: 200px;
    background-color: blue;
}  

.sanlan3{
    height: 100%;
    width: 200px;
    background-color: rgb(129, 42, 83);
} 

.sanlan2{
    height: 100%;
    flex:1;
    background-color: rgb(12, 42, 83);
} 

body{
    display: flex;
}

    </style>
</head>
<body >
    <div class="sanlan1"></div>
    <div class="sanlan2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi unde repudiandae laborum excepturi! At, quos, deleniti porro beatae dolores accusamus eaque vel unde culpa rem dolorum nam recusandae rerum quis mollitia cum? Esse tempore ipsam temporibus quisquam asperiores unde, ullam itaque cupiditate ut sapiente! Accusamus ipsam, porro, nostrum, excepturi quis officia labore mollitia possimus molestiae numquam repudiandae non sequi autem sed fugit dolor dignissimos omnis aliquid vero eligendi unde! Distinctio sapiente est molestias vero molestiae recusandae magnam in earum. Sunt quaerat quos esse, praesentium aliquam facere veniam aspernatur distinctio dicta. Corporis itaque id porro iste pariatur et rerum doloremque, autem excepturi qui non corrupti vel, magni libero odit tenetur a quis in odio eum sapiente provident quam! Optio labore, consequuntur incidunt qui cumque aliquam repellendus, obcaecati est iste voluptate delectus, non ab commodi nesciunt nam eius fugiat voluptates aspernatur quos quod magnam consequatur esse perspiciatis inventore? Hic nobis amet odit eos magnam. Quia doloremque corporis sit. Maxime suscipit explicabo veniam accusantium saepe quidem voluptatibus rerum error, eum impedit quaerat optio deleniti eius eligendi accusamus praesentium totam, dignissimos laboriosam officiis possimus, distinctio repudiandae consectetur itaque. Molestias quidem quaerat nesciunt corporis pariatur rem, ipsam totam explicabo nihil perferendis porro expedita debitis voluptatem voluptate unde sequi et architecto dolorum vero magnam. Consectetur illo nulla ut explicabo commodi, similique quis, amet aliquid architecto atque iusto dolore mollitia incidunt perferendis recusandae. Ex libero esse et quae modi natus, corporis perspiciatis ipsum facilis rerum, delectus animi quibusdam? Ad porro hic repellat ullam nam nihil laborum ut iste soluta architecto omnis, aut atque delectus dolore pariatur earum tempora mollitia magnam? Soluta obcaecati architecto vero vel aliquam sunt amet perspiciatis eos voluptatem possimus, necessitatibus autem sint. Et dolore cupiditate sequi debitis quidem temporibus nulla suscipit commodi voluptatum, cumque, quam aperiam amet labore eveniet aliquid harum, qui quis voluptate atque. Incidunt harum nulla reiciendis hic odio voluptatum excepturi! Quidem vitae a sint ad quo nostrum nam aspernatur ut, ab quos earum beatae, praesentium corporis cumque cupiditate officia ratione exercitationem dolorum quam tempore esse! Quia laboriosam sint fuga consequatur odit, mollitia voluptatem veritatis nihil at. Nesciunt impedit saepe quam dolorum, recusandae tenetur iusto porro. Laboriosam exercitationem consequatur a voluptatibus recusandae dicta aliquam excepturi saepe quis. Officiis, quo obcaecati quos reiciendis vero culpa necessitatibus adipisci quidem perspiciatis nobis, aliquam asperiores quisquam, dolores eligendi a repudiandae pariatur. Eligendi esse vero explicabo iste optio libero dolore numquam voluptates harum provident fugiat laboriosam minus molestias dolorum labore saepe minima reiciendis eos nulla quisquam, totam facilis aliquam eaque quo. Deleniti, itaque. Voluptatibus, repudiandae voluptatum nostrum amet unde neque magnam dolore perferendis et rem quo, vitae nobis dolores autem laudantium praesentium sint, nulla impedit illum quis inventore saepe possimus? Doloribus voluptatum aliquam, cupiditate temporibus culpa dignissimos magni magnam iusto doloremque quo accusamus numquam nobis voluptatibus in cumque, provident facere, aliquid ullam asperiores eveniet. Architecto corrupti consequatur veniam laboriosam, reiciendis voluptas? Fugiat obcaecati voluptatibus dignissimos accusantium quae facere laboriosam numquam quod iusto voluptatem quas commodi architecto nobis, perspiciatis minus provident soluta rem, assumenda atque illo. Optio accusamus deleniti porro error consequuntur tempore nam saepe corrupti quas cumque quasi laborum temporibus iste, aspernatur culpa, odio unde aperiam voluptas. Rem repellat ea accusantium enim eius. Voluptatem velit architecto amet, veritatis commodi sint nulla, molestias quaerat necessitatibus accusamus ipsum iure ipsam distinctio ducimus officia repellat voluptatum ad, corrupti aliquam eius? Fuga reiciendis, laudantium ipsa fugiat aspernatur repudiandae nihil voluptatibus qui ad obcaecati quas ratione assumenda animi odit doloremque corrupti vitae suscipit modi voluptatum accusamus voluptates iste. Dolor culpa a cupiditate in aut saepe expedita! Praesentium eum assumenda neque sit? Nemo nobis soluta placeat ullam corrupti voluptatibus saepe excepturi error cum, natus neque voluptate in laborum amet, possimus minus sapiente doloribus quae vitae debitis odio eaque laboriosam exercitationem? Id iste, blanditiis consectetur qui corporis, enim maxime, vel quod omnis similique a perspiciatis unde. Quas modi, voluptatum doloremque inventore ea, sunt animi ex sed perferendis dolorum officia iusto pariatur, accusamus excepturi porro exercitationem ducimus. Eius quaerat atque consequuntur architecto dignissimos repellendus, dolores veniam, molestias minus exercitationem voluptatum amet commodi tempore error tempora earum alias quia, ea reprehenderit. Esse, ducimus culpa numquam laudantium nam reprehenderit ipsa nulla hic aspernatur voluptate facere veniam soluta iusto beatae ab at cupiditate distinctio dolor, neque, dolores labore sapiente. Delectus praesentium nulla quae ut, corporis architecto laboriosam aliquid harum mollitia iusto id quidem officiis iste unde, non odit quas ex vitae impedit. Consequatur officiis deserunt ad nihil distinctio, cupiditate aliquam et reprehenderit autem cum dignissimos quibusdam nemo ducimus ratione. Molestiae velit tenetur eligendi animi et quam explicabo provident est possimus quisquam rerum soluta iste ducimus, eum voluptates libero? Sapiente quia placeat sequi sunt aperiam excepturi eius cum beatae fugiat alias tempore, est ad tenetur earum aut qui voluptates doloribus. Suscipit aliquam officiis numquam fugiat in, facere earum magnam mollitia voluptatum ipsum corporis porro tempora praesentium sit omnis tenetur iste perferendis delectus exercitationem minus placeat dolorum illo unde. Esse repellat assumenda consequuntur, beatae earum quos doloribus veritatis quas ullam ipsa distinctio commodi blanditiis ipsum aspernatur dolore hic ut recusandae autem rem dolores dignissimos eaque eum. Atque dignissimos laborum nemo. Dolorem veritatis dolores molestias ipsum doloribus temporibus in dignissimos hic error? Quaerat omnis ut, recusandae perspiciatis voluptatum natus at sed officiis? Necessitatibus quis nostrum voluptatibus tempora doloribus quasi ab. Ab, possimus ipsum. Nihil est illo magnam dignissimos. Sequi beatae id pariatur quo deleniti corrupti magnam dicta alias autem. Reprehenderit exercitationem natus quidem qui, possimus commodi animi perferendis? Consectetur neque minus cum laborum deleniti quod porro accusantium cupiditate in vero fuga rerum ex, sed atque illo dolores minima iusto est, excepturi provident quae, necessitatibus labore? Possimus ut perferendis ipsum debitis sapiente atque beatae amet earum animi nulla dolorum obcaecati velit eveniet sequi, delectus facere, nesciunt unde rerum dicta voluptas commodi et, corrupti tempore. Asperiores quis incidunt sapiente! Iure veniam sequi, velit nulla, voluptatum corrupti, accusamus natus ullam deserunt laboriosam ea? Consequuntur molestiae saepe vitae, in architecto cupiditate incidunt ab iste? Distinctio itaque suscipit delectus qui necessitatibus perspiciatis a, cumque laudantium consequuntur reiciendis quos iure molestiae maiores, ipsam repudiandae tempora doloribus provident!
    </div>
    <div class="sanlan3"></div>
</body>
</html>

方法四：双飞翼布局（负边距法）

理解：1.写三个盒子，且主体盒子必须写在最上面，其中主体栏的盒子在其基础上再嵌套一个父元素盒子，且宽度撑满；

2.使左盒子、右盒子及中间盒子的父元素盒子左浮动；

可以观察到中间盒子的父元素盒子独占一行，其余两个盒子都在下一行。

3.使左盒子的margin-left为-100%（使其移动了父元素宽度）；

4.使右盒子的margin-left为其自身宽度的负数；

可以观察到左盒子跑到了页面左上角，右盒子跑到了页面的的右上角。

5.给主体栏盒子设置margin使其不被遮挡。

<!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>
</head>
<style>
    .header{
        width: 100%;
    }

    .main-div{
        width: 100%;
        float: left;
        background-color: cornflowerblue;
    }

    .main{
        height: 300px;
        background-color: blueviolet;
        margin:0 200px;
    }

    .left{
        width: 200px;
        height: 300px;
        background-color: brown;
        margin-left: -100%;
        float: left;
    }

    .right{
        width: 200px;
        height: 300px;
        background-color: burlywood;
        margin-left: -200px;
        float: left;
    }

</style>
<body>
    <header class="header">
       <div class="main-div">
           <div class="main"></div> 
        </div>
        <div class="left"></div>
        <div class="right"></div> 
        
    </header>
    
</body>
</html>

方法五：圣杯布局

——大体思路和双飞翼布局相同

1.三个元素均设置为浮动；

2.设置中间部分padding，给两侧留出空间；

3.再分别设置左边框与右边框，采用margin为负来使其处于同一行；

4.期间要处理浮动坍塌，及使用定位来使其合理布局。

<!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>圣杯布局</title>
</head>
<style>
    .sanlan{
        background-color: chocolate;
        overflow: hidden;
        padding: 0 250px;
        min-width: 300px;
    }

    .main{
        float: left;
        width: 100%;
        height: 300px;
        background-color: brown;
    }
    .left{
        float: left;
        width: 200px;
        height: 300px;
        background-color: burlywood;
        margin-left: -100%;
        position:relative;
        left: -200px;
    }
    .right{
        float:left;
        width: 200px;
        height: 300px;
        background-color: chartreuse;
        /* margin-right: -200px; */
        margin-left: -200px;
        position: relative;
        right: -200px;  
    }

</style>
<body>
    <div class="sanlan">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
</body>
</html>

以上是我的解题思路与方法，欢迎补充与建议！