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

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

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

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

1、浮动实现

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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占满剩余空间。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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的元素,都不能与浮动元素相互覆盖。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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实现

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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)
江山如画的头像江山如画管理团队
上一篇 2021年11月29日 上午9:28
下一篇 2021年11月29日 下午5:56

99%的人还看了以下文章

  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    3.7K0
  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    2.7K0
  • CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

    CSS3的transform:scale()可以实现按比例放大或者缩小功能,transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。 transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间; t…

    2018年8月1日
    4.6K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    5.6K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    2.4K0
  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    2.4K0

发表回复

登录后才能评论