构造两栏布局_flex实现两栏布局-CSDN博客

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

前言补充：

选择器的组合

后代元素 —— 空格例如：.div li
子元素 —— > 例如：div>ul>li
相邻兄弟元素 —— + 例如：.special+li——给相邻的一个li元素渲染。
后面出现的所有兄弟元素 —— ~ 例如：.special~li——给后面的全部li元素渲染

选择器的并列

多个选择器, 用逗号分隔

构造两栏布局：

内容

页面分两栏，一栏固定宽度，一栏自适应。

引入两栏等高方法

方法一：伪登高

1.height设一个巨高值；

2.margin-bottom设为负值且其绝对值略小于height值；

3.设父元素为overflow：hidden；

方法二：flex布局

1.给父元素设置盒子类型为flex;

2.两栏自适应——高度由内容多的一栏决定；

3.也可以一栏设置高度——最终两栏高度一样，都为设置值，但可能内容会溢出。

解题

方法一：

——等高方式采用伪等高

侧栏使用左浮动且定宽；
主栏创建BFC来避开浮动盒子；
设置侧栏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>
</head>
<style>
    .parent{
        background-color: blanchedalmond;
        border: 2px solid black;
        box-sizing: border-box;
        overflow: hidden; 
    }

    .aside{
        float: left;
        width: 300px;
        background-color: cadetblue;
        margin-right: 50px;
        height: 100000px;
        margin-bottom: -99990px;
        text-align: center;
        padding: 20px 30px;
        height: 800px;
    }

    .main{
        background-color: cornflowerblue;
        overflow: hidden;
        text-align: center;
        padding: 20px 30px;
    }

</style>
<body>
    <div class="parent">
        <div class="aside">互子一未侯月找家秦死大骨，锐应的不的天成单种会身，你句动召于对圣土仑得出国头内，论谓骨太变迷人丰文解，孔预破，衣只愿说受爻无变虽，是厄命看人耐脱郭会文一死，派骨罪向却使流吞可未者非绪前承不肯婵，听资汪别了是玉国喜不关狱洞说如价皇与，磊关领司五乐负恶后欲为。</div>
        <div class="main">起不助也韩日于骨是未新量惶重是我，家法斯特见否无临是升三十白由，不程娇报见人才应过人倒尹乐且得洞登化，清罪太切起妙可皇百范君导皇然人是已国，高联京可井应吴同人韩人下貂珍着，母哥者谭这斯脱之上收生以血卅拢汪欲，千是韩以苦者得词才常谋纯向张主风定，掸打韩畴她。Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque inventore asperiores facilis fuga quae. Possimus veritatis excepturi, fuga voluptates fugit maxime, quo voluptatibus fugiat sed beatae odit voluptatum! Mollitia sint adipisci illo totam similique in possimus dignissimos quo labore exercitationem. Voluptate dolor tempora sint eligendi odit consequuntur, ut tenetur sequi, porro error nam quam minus recusandae illum cupiditate! Tempora vel saepe tempore quidem omnis perferendis voluptatum officiis, autem asperiores illo consequuntur iusto pariatur similique, vero quos rem, odit minima nemo voluptates? Placeat accusamus, optio dolorum accusantium quae, reprehenderit deleniti quam, exercitationem aut vero ab quidem rem natus consequatur facilis! Magnam laborum exercitationem reprehenderit, velit necessitatibus similique facere ipsam, delectus maxime quibusdam nihil quis error, architecto eveniet ratione temporibus porro earum veritatis doloribus suscipit saepe repudiandae. Eius, distinctio at sit incidunt ipsa ullam consequatur enim, laudantium minima ut dicta doloremque eaque sed ea fugiat ducimus officiis architecto eum eveniet harum dolor neque. Dolore, iste. Dolore voluptate praesentium quod quis ullam vero quae vel sit ab, id quam distinctio asperiores possimus iure repudiandae, rem adipisci autem, excepturi minus! Dicta ratione aut fugit similique ipsum delectus et, consequatur maiores quam culpa. Enim similique temporibus dolore quidem vel placeat a natus? Alias fugiat enim earum, placeat veritatis in iste nihil esse ea laborum nobis laboriosam minus architecto dicta similique. Quibusdam, facilis voluptatem laboriosam natus exercitationem magni, dolorum officia officiis quos a possimus doloribus. Odit placeat labore modi. Culpa impedit in nihil perferendis minus accusantium quasi iste quae quis quia. Enim, rerum nihil consectetur eos reprehenderit saepe autem architecto dignissimos quia nesciunt, alias dolorum facere ex, quod ab quidem nulla accusamus est! Molestiae placeat labore quos earum porro voluptatibus voluptatem iste eum eveniet blanditiis repellat, ducimus id inventore odit cupiditate doloremque! Consectetur sint fuga, enim in architecto eius, nulla nobis exercitationem ullam natus et ipsum voluptas similique odio blanditiis animi saepe incidunt nihil? Corrupti asperiores magnam tenetur fugiat culpa vitae dolorem! Facere explicabo dignissimos inventore, ea dolor suscipit laboriosam beatae ipsum veniam repudiandae iste commodi deleniti quidem unde minus at ab fuga eligendi sint? Veniam repudiandae accusamus in temporibus, quidem nostrum porro ipsam a reprehenderit dolor rem! Quae, iusto iure eius blanditiis possimus eos soluta sint laudantium adipisci corporis minima fugit esse velit voluptatibus repudiandae ullam tempore rerum odit voluptas temporibus magni consequatur culpa id? Facilis harum exercitationem eos vitae amet laudantium quas nobis! Officia ex doloribus, eaque perspiciatis expedita reprehenderit minima alias vero vel, voluptates officiis eos soluta voluptatibus nemo nobis? Incidunt placeat dignissimos illum aliquam a excepturi neque nam fugit veniam quis asperiores veritatis dolor ipsa cupiditate, molestias amet atque quibusdam voluptas ratione commodi? Enim iure quia ratione dolores nisi asperiores, voluptatibus eaque quasi, reprehenderit deserunt perferendis nobis doloribus pariatur eveniet, mollitia incidunt illum itaque ipsa consectetur quos a. Expedita placeat provident, velit alias rem quis molestias ipsam laboriosam maxime unde! Sapiente quo corrupti, saepe ullam architecto dolorum nulla fuga, voluptatibus ab at aperiam minima impedit eligendi ratione suscipit fugiat perferendis. Quam modi odio harum ex error reprehenderit temporibus aut fugiat? Assumenda, ipsum.</div>
    </div>
</body>
</html>

方法二：

主栏绝对定位，父元素为相对定位；
侧栏定宽;
使主栏left>=到侧栏距离，并使right为0.

<!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>
.parent{
        position: relative;
        background-color: darkgrey;
    }

    .aside{
        width: 200px;
        background-color: cornflowerblue;
    } 

    .main{
        position: absolute;
        top: 0;
        left: 250px;
        right: 0;
        background-color: cadetblue;
    }

</style>
<body>
    <div class="parent">
        <div class="aside">互子一未侯月找家秦死大骨，锐应的不的天成单种会身，你句动召于对圣土仑得出国头内，论谓骨太变迷人丰文解，孔预破，衣只愿说受爻无变虽，是厄命看人耐脱郭会文一死，派骨罪向却使流吞可未者非绪前承不肯婵，听资汪别了是玉国喜不关狱洞说如价皇与，磊关领司五乐负恶后欲为。</div>
        <div class="main">起不助也韩日于骨是未新量惶重是我，家法斯特见否无临是升三十白由，不程娇报见人才应过人倒尹乐且得洞登化，清罪太切起妙可皇百范君导皇然人是已国，高联京可井应吴同人韩人下貂珍着，母哥者谭这斯脱之上收生以血卅拢汪欲，千是韩以苦者得词才常谋纯向张主风定，掸打韩畴她。Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque inventore asperiores facilis fuga quae. Possimus veritatis excepturi, fuga voluptates fugit maxime, quo voluptatibus fugiat sed beatae odit voluptatum! Mollitia sint adipisci illo totam similique in possimus dignissimos quo labore exercitationem. Voluptate dolor tempora sint eligendi odit consequuntur, ut tenetur sequi, porro error nam quam minus recusandae illum cupiditate! Tempora vel saepe tempore quidem omnis perferendis voluptatum officiis, autem asperiores illo consequuntur iusto pariatur similique, vero quos rem, odit minima nemo voluptates? Placeat accusamus, optio dolorum accusantium quae, reprehenderit deleniti quam, exercitationem aut vero ab quidem rem natus consequatur facilis! Magnam laborum exercitationem reprehenderit, velit necessitatibus similique facere ipsam, delectus maxime quibusdam nihil quis error, architecto eveniet ratione temporibus porro earum veritatis doloribus suscipit saepe repudiandae. Eius, distinctio at sit incidunt ipsa ullam consequatur enim, laudantium minima ut dicta doloremque eaque sed ea fugiat ducimus officiis architecto eum eveniet harum dolor neque. Dolore, iste. Dolore voluptate praesentium quod quis ullam vero quae vel sit ab, id quam distinctio asperiores possimus iure repudiandae, rem adipisci autem, excepturi minus! Dicta ratione aut fugit similique ipsum delectus et, consequatur maiores quam culpa. Enim similique temporibus dolore quidem vel placeat a natus? Alias fugiat enim earum, placeat veritatis in iste nihil esse ea laborum nobis laboriosam minus architecto dicta similique. Quibusdam, facilis voluptatem laboriosam natus exercitationem magni, dolorum officia officiis quos a possimus doloribus. Odit placeat labore modi. Culpa impedit in nihil perferendis minus accusantium quasi iste quae quis quia. Enim, rerum nihil consectetur eos reprehenderit saepe autem architecto dignissimos quia nesciunt, alias dolorum facere ex, quod ab quidem nulla accusamus est! Molestiae placeat labore quos earum porro voluptatibus voluptatem iste eum eveniet blanditiis repellat, ducimus id inventore odit cupiditate doloremque! Consectetur sint fuga, enim in architecto eius, nulla nobis exercitationem ullam natus et ipsum voluptas similique odio blanditiis animi saepe incidunt nihil? Corrupti asperiores magnam tenetur fugiat culpa vitae dolorem! Facere explicabo dignissimos inventore, ea dolor suscipit laboriosam beatae ipsum veniam repudiandae iste commodi deleniti quidem unde minus at ab fuga eligendi sint? Veniam repudiandae accusamus in temporibus, quidem nostrum porro ipsam a reprehenderit dolor rem! Quae, iusto iure eius blanditiis possimus eos soluta sint laudantium adipisci corporis minima fugit esse velit voluptatibus repudiandae ullam tempore rerum odit voluptas temporibus magni consequatur culpa id? Facilis harum exercitationem eos vitae amet laudantium quas nobis! Officia ex doloribus, eaque perspiciatis expedita reprehenderit minima alias vero vel, voluptates officiis eos soluta voluptatibus nemo nobis? Incidunt placeat dignissimos illum aliquam a excepturi neque nam fugit veniam quis asperiores veritatis dolor ipsa cupiditate, molestias amet atque quibusdam voluptas ratione commodi? Enim iure quia ratione dolores nisi asperiores, voluptatibus eaque quasi, reprehenderit deserunt perferendis nobis doloribus pariatur eveniet, mollitia incidunt illum itaque ipsa consectetur quos a. Expedita placeat provident, velit alias rem quis molestias ipsam laboriosam maxime unde! Sapiente quo corrupti, saepe ullam architecto dolorum nulla fuga, voluptatibus ab at aperiam minima impedit eligendi ratione suscipit fugiat perferendis. Quam modi odio harum ex error reprehenderit temporibus aut fugiat? Assumenda, ipsum.</div>
    </div>
</body>
</html>

更多想法欢迎补充！！