投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

江山如画 • • 网页制作 • 阅读 3468

css多栏自适应布局一般使用position属性布局，或者用float属性布局，也可以使用display属性。

position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。

相关阅读：左侧固定，右侧自适应布局的两种实现方法

1、浮动实现

原理：左侧定宽浮动，右侧使用margin-left，且不要定宽，容器尺寸变化右侧可自适应

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title></title>
    <style type="text/css">
.left {
    width: 150px;
    float: left;
    background-color: pink;
}

/*流体布局*/
.right {
    margin-left: 150px;
    background-color: green;
}
  </style>
</head>
<body>
    <div class="left">
        左侧内容固定---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
    </div>
    <div class="right">
        右侧内容自适应----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
    </div>
</body>
</html>

Div+CSS左侧尺寸固定右侧自适应布局

2、绝对定位实现

原理：重点是container设置padding-left给left腾出空间，left相对于containr绝对定位，right占满剩余空间。

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>2 columns layout of starof</title>
<style type="text/css">
.container {
    width: 100%;
    position: relative;
    padding-left: 150px;
}
.left {
    width: 150px;
    position: absolute;
    left: 0;
    background-color: pink;
}

/*流体布局*/
.right {
    width: 100%;
    background-color: green;
}
</style>
</head>
<body>
    <div class="container">
        <div class="left">
            左侧内容 <strong>固定</strong>
            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
        </div>
        <div class="right">
            右侧内容 <strong>自适应</strong>
            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
        </div>
    </div>
</body>
</html>

Div+CSS左侧尺寸固定右侧自适应布局

3、BFC实现

原理：左栏定宽浮动，右栏生成BFC，根据BFC特性，与浮动元素相邻的，创建了BFC的元素，都不能与浮动元素相互覆盖。

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>2 columns layout of starof</title>
<style type="text/css">
.left {
    width: 150px;
    float: left;
    background-color: pink;
}

/*流体布局*/
.right {
    display: table-cell;
    background-color: green;
}
</style>
</head>
<body>
        <div class="left">
            左侧内容 <strong>固定</strong>
            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
        </div>
        <div class="right">
            右侧内容 <strong>自适应</strong>
            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
        </div>
</body>
</html>

4、table实现

<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
    <title>2 columns layout of starof</title>
<style type="text/css">
.container {
    width: 100%;
    display: table;
}
.left {
    width: 150px;
    display: table-cell;
    background-color: pink;
}
.right {
    display: table-cell;
    background-color: green;
}
</style>
</head>
<body>
    <div class="container">
        <div class="left">
            左侧内容 <strong>固定</strong>
            ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
        </div>
        <div class="right">
            右侧内容 <strong>自适应</strong>
            ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
        </div>
    </div>
</body>
</html>

Div+CSS左侧尺寸固定右侧自适应布局

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/9953.html

赞 (0)
江山如画的头像江山如画管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2021年11月29日 上午9:28
下一篇 2021年11月29日 下午5:56

99%的人还看了以下文章

发表回复

登录后才能评论