2-两栏布局

最新推荐文章于 2023-05-14 09:05:56 发布

abgu66884

最新推荐文章于 2023-05-14 09:05:56 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/ogrowup/p/8482189.html

版权

实现效果：左边固定，宽度100px; 右边自适应，间隔左边20px

方法1和2

block特点：

利用block级别的元素盒子宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。

block级别的元素会认为浮动的元素和绝对定位的元素不存在，而且独占一行，这样就可以和浮动元素同处一行了；inline级别的元素就能识别到浮动的元素。

方法1：float margin-left（注意清浮动）

<style type="text/css">
    .parent{overflow: hidden;}
    .left-child{width:100px;height: 100px; background: #f00; float: left;}
    .right-child{background:#aaa;height:200px; margin-left: 120px; }
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>

方法2：absolute margin-left

<style type="text/css">
    .parent{}
    .left-child{width:100px;height: 100px; background: #f00; position:absolute;}
    .right-child{background:#aaa;height:200px; margin-left: 120px; }
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>

方法3和4

width: calc(100%-120px)：通过父容器宽度100%去动态计算右侧盒子的宽度，注意减去左侧盒子具体的宽度（content+padding+border）和右侧盒子的border

为了计算右侧盒子准确的宽度，设置父元素box-sizing:content-box；子元素的box-sizing:border-box;

方法3：双inline-block

<style type="text/css">
    .parent{box-sizing: content-box; font-size:0; }
    .left-child, .right-child{display: inline-block;box-sizing: border-box;font-size: 12px; vertical-align: top; }
    .left-child{background: #f00; width:100px; height: 100px; margin-right: 20px;}
    .right-child{background:#aaa;height:200px; width:calc(100% - 120px);}
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>

需要消除div之间的空格，设置父元素font-size:0；

因为inline-block，必须设置vertical-align来使它们顶端对齐。

方法4：双float(注意清浮动)

<style type="text/css">
    .parent{box-sizing: content-box; overflow: auto;}
    .left-child, .right-child{box-sizing: border-box; float:left;}
    .left-child{background: #f00; width:100px; height: 100px; margin-right: 20px;}
    .right-child{background:#aaa;height:200px; width:calc(100% - 120px);}
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>
</body>

方法5、6和7

不用去管左侧到底用多宽，只要设置间隔距离就行。

方法5：float BFC（注意清浮动）

<style type="text/css">
    .parent{overflow: auto;}
    .left-child{width:100px;height: 100px; background: #f00; float:left;margin-right: 20px;}
    .right-child{background:#aaa;height:200px; overflow: auto; }
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>
</body>

这种方法不用去管左侧宽度有多宽

方法6：flex

<style type="text/css">
    .parent{display: flex; align-items: flex-start;}
    .left-child{width:100px;height: 100px; background: #f00; flex: 0 0 auto;}
    .right-child{background:#aaa;height:200px; flex: 1 1 auto; margin-left: 20px;}
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>
</body>

align-items默认值是stretch，这个属性根据同列有设置高的元素，使得没有设置高的元素同高。

方法7：grid

<style type="text/css">
    .parent{display: grid;grid-template-columns:120px 1fr; align-items: flex-start;}
    .left-child, .right-child{box-sizing: border-box;}
    .left-child{height:100px; background: #f00; grid-column:1; margin-right: 20px;}
    .right-child{height:200px; background:#aaa; grid-column:2;}
</style>
</head>
<body>
<div class="parent">
    <div class="left-child"></div>
    <div class="right-child"></div>
</div>
</body>

　 grid布局也有列等高的默认效果，设置align-items:start;

在使用margin-left的时候，grid的布局默认是box-sizing设置的盒宽度之间的位置，flex使用两个div的border或padding外侧之间的距离。

转载于:https://www.cnblogs.com/ogrowup/p/8482189.html

abgu66884

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-两栏布局

实现效果：左边固定，宽度100px; 右边自适应，间隔左边20px方法1和2block特点：利用block级别的元素盒子宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。 block级别的元素会认为浮动的元素和绝对定位的元素不存在，而且独占一行，这样就可以和浮动元素同处一行了；inline级别的元素就能识别到浮动的元素。方法...
复制链接

扫一扫