css布局：等高布局

最新推荐文章于 2024-07-16 16:07:08 发布

酷jjs

最新推荐文章于 2024-07-16 16:07:08 发布

阅读量667

点赞数 1

分类专栏：前端笔记 css 文章标签：布局等高布局

本文链接：https://blog.csdn.net/qq_32584661/article/details/52354801

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

等高布局：（左右两边，一侧设置高度，另一侧自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        *{ margin:0;padding: 0;}
        .wrap{ width:1000px; margin: 0 auto;overflow: hidden;}
        .left{ width:200px;background: yellow;float: left;padding-bottom: 10000px;margin-bottom: -10000px;}
        .right{ width:800px;background: yellowgreen;float: right;padding-bottom: 10000px;margin-bottom: -10000px;}
    </style>

</head>
<body>

<div class="wrap">
    <div class="left">

        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>

    </div>
    <div class="right">

        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>
        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>
        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>
        &nbsp;&nbsp;&nbsp;页面内容 &nbsp;&nbsp;&nbsp; &nbsp;<br>


    </div>
</div>

</body>
</html>

效果如图所示

酷jjs

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css布局：等高布局

等高布局：（左右两边，一侧设置高度，另一侧自适应）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>等高布局</title> <style> *{ margin:0;padding: 0;} .wrap{ width:1000px; margin: 0 a
复制链接

扫一扫

专栏目录