两栏布局的多种方式

最新推荐文章于 2020-12-06 16:24:45 发布

CathyLeeeee

最新推荐文章于 2020-12-06 16:24:45 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/CathyLeeeee/article/details/97823278

版权

一.最常用又最简单的布局就是：左边固定宽度，右边自适应

实现方法是用float+margin-right：

eg：

<body>
    <div  id="wrapper">
        <div class="left">左边固定宽度，高度不固定</div>
        <div class="right" >这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</div>
    </div>
</body>

    <style>
        .right {
            margin-left: 150px;
            border: 5px solid #ddd;
        }

        .left {
            float: left;
            width: 120px;
            border: 5px solid #ddd;
        }

        #wrapper {
            overflow: hidden;
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
    </style>

二.双inline-block方案

注：vertical-align属性设置元素的垂直对齐方式。

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中

calc() 函数用于动态计算长度值。

● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；//表示设置宽度比100%的宽度少10px。

● 任何长度值都可以使用calc()函数进行计算；

● calc()函数支持 “+”, “-”, “*”, “/” 运算；

● calc()函数使用标准的数学运算优先级规则；

eg：

<body>
    <div id="wrapper">
        <div class="left" >左边固定宽度，高度不固定
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            沙发就开始打
        </div>
        <div class="right" >这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</div>
    </div>
</body>

    <style>
        .right {
            width: calc(100% - 140px);
            border: 5px solid #ddd;
            display: inline-block;
            vertical-align: top;
            
            box-sizing: border-box;
        }

        .left {
            width: 120px;
            border: 5px solid #ddd;
            display: inline-block;
            vertical-align: top;
            
            box-sizing: border-box;
        }

        #wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
    </style>

三.双float方案

eg：

<body>
    <div id="wrapper">
        <div class="left" >左边固定宽度，高度不固定
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            沙发就开始打
        </div>
        <div class="right" >这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</div>
    </div>
</body>

   <style>
        .right {
            float: left;
            margin-left: 20px;
            width: calc(100% - 140px);
            border: 5px solid #ddd;
            box-sizing: border-box;
        }

        .left {
            float: left;
            width: 120px;
            border: 5px solid #ddd;
            box-sizing: border-box;
        }

        #wrapper {
            overflow: auto;
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
            box-sizing: content-box;
        }
    </style>

四.BFC+float方案

如何触发一个盒子的bfc

position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;

eg:

<body>
    <div id="wrapper">
        <div class="left">左边固定宽度，高度不固定
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            沙发就开始打
        </div>
        <div class="right">这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</div>
    </div>
</body>

    <style>
        .right {
            overflow: auto;
            border: 5px solid #ddd;
        }

        .left {
            margin-right: 20px;
            float: left;
            width: 120px;
            border: 5px solid #ddd;
        }

        #wrapper {
            overflow: auto;
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
    </style>

CathyLeeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两栏布局的多种方式

一.最常用又最简单的布局就是：左边固定宽度，右边自适应实现方法是用float+margin-right：eg：<body> <div id="wrapper"> <div class="left">左边固定宽度，高度不固定</div> <div class="right" >这里的内容可能比...
复制链接

扫一扫