下载文档原格式
CSS实现⾏内和上下⾃适应的⼏种⽅法在写⼀个移动端⽹页，发现⽹页的头部搜索框两边各有固定宽度的按钮，搜索框可以根据宽度的变化来改变⾃⼰的宽度，达到填充的⽬的，也就是⼀种⾃适应吧，下⾯写写⾃⼰尝试的⼏种⽅法⼀利⽤css3 的width：calc（100% - npx）；<body><div style="border: 1px solid black;width: 100%;height: 100px"><div class="div1" style="float: left;height: 50px;width: 100px;background: red"></div><div class="div2" style="float: left;height: 50px;width:calc(100% - 120px);background: yellow"></div></div></body>注意 width:calc(100% - 120px); 两边都有空格，不要问我为什么会知道。
⼆利⽤display:table和display:table-cell；<body><div class="box" style="border: 1px solid black;width: 100%;height: 100px;display: table"><li class="left" style="background: red;display: block;width: 100px;height: 100px;"></li><li class="right" style="background: deepskyblue;display: table-cell;width: 100%"></li></div></body>display:table 这个属性很少⽤，display:table-cell可以⾃适应宽度，这点倒是挺好的。
典型的DIV＋CSS布局——左中右版式中，运⽤的是浮动属性；这个实例，则运⽤了绝对定位属性。
1、在#container中设置“position:relative;”，其作⽤是使得后⾯的绝对定位的基准为#container⽽不是以浏览器为其准。
2、左侧列#left_side和右侧#right_side列采⽤绝对定位，并且固定这两个div的宽度，⽽中间列#content由于需要根据浏览器⾃动调整，因此不设置类似属性。
但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px[html]1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>2.3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.5. <html xmlns="/1999/xhtml" >6. <head runat="server">7. <title>左中右版式</title>8. </head>9. <body>10. <form id="form1" runat="server">11. <div id="wrap">12. <div id="header">header</div>13. <div id="container">14. <div id="left_side">left_side</div>15. <div id="content">content</div>16. <div id="right_side">right-side</div>17. </div>18. <div id="footer">footer</div>19. </div>20. </form>21. </body>22. </html>[css]01. #wrap{02. width:700px;03. margin:0 auto;04. }05. #header{06. margin:20px;07. height:80px;08. border:solid 1px #0000FF;09. }10. #container{11. position:relative;12. margin:20px;13. height:400px;14. }15. #left_side{16. position:absolute;17. top:0px;18. left:0px;19. border:solid 1px #0000FF;20. width:170px;21. height:100%;22. }23. #content{24. margin:0px 190px 0px 190px;25. border:solid 1px #0000FF;26. height:100%;27. }28. #right_side{29. position:absolute;30. top:0px;31. right:0px;32. border:solid 1px #0000FF;33. width:170px;34. height:100%;35. }36. #footer{37. margin:20px;38. height:80px;39. border:solid 1px #0000FF;40.41. }。
HTML和CSS实现左侧固定宽度右侧内容可滚动在做移动端页⾯的时候，经常会碰到⼀个div中分左右两个div，左侧div固定宽度或百分⽐，右侧div中内容左右溢出，需要左右滑动才可以浏览到全部内容，为此写了⼀个demo。
处理这个问题的核⼼关键点是右侧div需要设置固定宽度或者百分⽐，然后设置它的overflow为auto或者scroll。
最重要的是，需要左右滚动的内容需要设置属性white-space: nowrap（规定段落中的⽂本不进⾏换⾏）。
⼀般移动端左右滑动不需要显⽰滚动条，此时可以设置.element::-webkit-scrollbar {display:none}Demo：HTML:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>模板</title><link href="css/style.css" rel="stylesheet" type="text/css"></head><body><div><div class="normal-div first"></div><div class="normal-div second"></div><div class="normal-div third"><div class="left"></div><div class="right"><ul><li>额风格的规划法⼤好⼈和交通局对符合⼈体会让对⽅回复都很反感发帖蝴蝶夫⼈诞⽣于红烧⾁</li><li>额风格的规划法⼤好⼈和交通局对符合⼈体会让对⽅回复都很反感发帖蝴蝶夫⼈诞⽣于红烧⾁</li><li>额风格的规划法⼤好⼈和交通局对符合⼈体会让对⽅回复都很反感发帖蝴蝶夫⼈诞⽣于红烧⾁</li></ul></div></div></div></body></html>CSS:.normal-div{height:300px;width:100%;background:red;}.second{background:blue;}.third{position:relative;background:grey;font-size:18px;}.left{display:inline-block; position:absolute;top:0;left:0;background:green; width:25%;height:300px;}.right{display:inline-block; margin-left: 25%;width:75%;height:300px;background:yellow; white-space:nowrap; overflow-x:auto;}.right li{display:inline-block; }.right::-webkit-scrollbar{ display:none;}。
CSS布局（四）左右布局本⽂是根据⽹上资料总结出来的⽂章左边固定，右边⾃适应的两栏布局。
基本样式<div class="wrapper" id="wrapper"><div class="left">左边固定宽度，⾼度不固定 </br> </br></br></br>⾼度有可能会很⼩，也可能很⼤。
</div><div class="right">这⾥的内容可能⽐左侧⾼，也可能⽐左侧低。
宽度需要⾃适应。
</br>基本的样式是，两个div相距20px, 左侧div宽 120px</div></div>.wrapper {padding: 15px 20px;border: 1px dashed #ff6c60;}.left {width: 120px;border: 5px solid #ddd;}.right {margin-left: 20px;border: 5px solid #ddd;}双inline-block⽅案通过width: calc(100% - 140px)来动态计算右侧盒⼦的宽度。
需要知道右侧盒⼦距离左边的距离，以及左侧盒⼦具体的宽度(content+padding+border)，以此计算⽗容器宽度的100%需要减去的数值。
同时，还需要知道右侧盒⼦的宽度是否包含border的宽度。
.wrapper-inline-block {box-sizing: content-box;font-size: 0; // 消除空格的影响}.wrapper-inline-block .left,.wrapper-inline-block .right {display: inline-block;vertical-align: top; // 顶端对齐font-size: 14px;box-sizing: border-box;}.wrapper-inline-block .right {width: calc(100% - 140px);}双float⽅案通过动态计算宽度来实现⾃适应。
CSS经典三栏布局⽅案（6种⽅法）本⽂介绍了CSS经典三栏布局⽅案，分享给⼤家，也给⾃⼰做个笔记，具体如下：三栏布局，顾名思义就是两边固定，中间⾃适应。
三栏布局在开发⼗分常见1. float布局最简单的三栏布局就是利⽤float进⾏布局。
⾸先来绘制左、右栏：<style>.left {float: left;width: 100px;height: 200px;background-color: red;}.right {float: right;width: 100px;height: 200px;background-color: yellow;}</style><div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>此时可以得到左右两栏分布：接下来再来看中间栏如何处理。
我们知道对于float元素，其会脱离⽂档流，其他盒⼦也会⽆视这个元素。
（但其他盒⼦内的⽂本依然会为这个元素让出位置，环绕在周围。
）所以此时只需在container容器内添加⼀个正常的div，其会⽆视left和right，撑满整个container，只需再加上margin为left right流出空间即可：<style>.left {float: left;width: 100px;height: 200px;background-color: red;}.right {float: right;width: 100px;height: 200px;background-color: yellow;}.main {background-color: green;height: 200px;margin-left: 120px;margin-right: 120px;}.container {border: 1px solid black;}<div class="container"><div class="left"></div><div class="right"></div><div class="main"></div></div>优势：简单劣势：中间部分最后加载，内容较多时影响体验2. BFC 规则BFC(块格式化上下⽂)规则规定：BFC不会和浮动元素重叠。
css宽度自适应宽高自适应一、宽度自适应二、高度自适应三、浮动元素的高度自适应四、窗口自适应五、结语一、宽度自适应不写宽度或者写width：auto就表示宽度自适应，可用于横栏或导航栏。
与width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度，前者在设置padding 时横向出现滚动条，后者在设置padding 时会自动压缩宽度大小。
有min-width、max-width 属性，max-width 用于图片上可避免拉大屏幕时图片失真。
二、高度自适应不写高度或者写height：auto就表示高度自适应，可用于内容多时让盒子自动撑开。
不写高度时，内容太少的情况下，网页看着不美观，因此可设置min-height 属性确定最小高度，使其在无内容或内容少时仍保持美观。
有max-height、min-height 属性，其中，最常用的属性是min-height。
三、浮动元素的高度自适应父元素不写高度时，子元素进行了浮动，此时父元素会出现高度塌陷。
解决高度塌陷的方法：写固定高度。
将父元素的高度设置与子元素高度一致；缺点：高度固定，如果浮动过多，换行会出现问题；清除浮动。
在补位元素，即顶上浮动元素位置的元素中添加CSS 中的clear 属性，清除前方浮动元素带来的干扰作用；缺点：不利于代码可读性，自己产生的问题，却由其他元素来解决；补盒子。
在当前浮动元素的下方添加一个空的div 元素，并在该元素中添加CSS 中的clear 属性；缺点：增加空标签，不利于代码可读性，降低浏览器性能；引发bfc。
给父元素添加CSS 样式overflow：hidden，引发bfc，构成一个封闭空间，让浮动元素计算高度；缺点：隐藏溢出元素，当浮动元素为二级菜单时，二级菜单无法展示；注：二级菜单要脱离文档流，与父元素设置子绝父相，通过top 等设置位置使用伪元素（万能方案）。
给父元素设置伪元素选择器::after ，通过属性content 在最后方设置内容（有无值都可），添加清浮动属性clear：both，同时将虚拟元素设为块元素，再设置宽高为0，最后设置visibility 属性为hidden，隐藏伪元素内容。
详解css布局实现左中右布局的5种⽅式本⽂介绍了详解css布局实现左中右布局的5种⽅式，分享给⼤家，具体如下：效果如下：左中右布局<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html *{margin: 0;padding: 0;}article{height: 100px;}section{margin-top: 10px;}.left{width: 300px;height: 100px;background-color: #823384;text-align: center;font-size: 20px;color: #fdf6e3;}.center{height: 100px;background-color: #d29922;}.right{width: 300px;height: 100px;background-color: #0c8ac5;text-align: center;font-size: 20px;color: #fdf6e3;}</style></head><body><!--浮动布局--><!--左浮动, 右浮动, 中间⾃动填充--><section class="layout float"><style>.float article div{}.float article .left{float: left;}.float article .right{float: right;}.float article .center{}</style><article class="left-right-center"><div class="left">左边</div><div class="right">右边</div><div class="center"><h1>浮动float布局:</h1> 左元素: float: left; 右元素: float: right; 中间元素:⾃动填充</div></article></section><!--绝对定位--><section class="layout absolute"><style>article{position: relative;}.absolute .left-center-right div{position: absolute;}.absolute .left-center-right .left{left: 0;}.absolute .left-center-right .center{left: 300px;right: 300px;}.absolute .left-center-right .right{right: 0;}</style><article class="left-center-right"><div class="left">左边</div><div class="center"><h1>绝对absolute定位布局:</h1> 左边元素: position: absolute; left: 0;右边元素: position: absolute; right:0; 中间元素: position: absolute;left:300px; right: 300px; </div><div class="right">右边</div></article></section><!--flex布局--><section class="layout flexbox"><style>.flexbox .left-center-right{display: flex;}.flexbox .left-center-right .left{}.flexbox .left-center-right .center{flex:1;}.flexbox .left-center-right .right{}</style><article class="left-center-right"><div class="left">左边</div><div class="center"><h1>flex布局:</h1> ⽗元素display:flex; 左右⼦元素设置宽度300px; 中间⼦元素设置flex:1;</div><div class="right">右边</div></article></section><!--表格布局--><section class="table-box layout"><style>.table-box .left-center-right{width: 100%;display: table;}.table-box .left-center-right>div{display: table-cell;}.table-box .left-center-right .left{}.table-box .left-center-right .center{}.table-box .left-center-right .right {}</style><article class="left-center-right"><div class="left">左边</div><div class="center"><h1>表格table布局:</h1> ⽗元素width: 100%; display: table;左右⼦元素display: table-cell; width: 300px; </div><div class="right">右边</div></article></section><!--⽹格布局--><section class="grid layout"><style>.grid article{display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}</style><article class="left-center-right"><div class="left">左边</div><div class="center"><h1>⽹格grid布局:</h1> ⽗元素宽度为100%,⽗元素width: 100%; display:grid; grid-template-rows: 100; grid-template-columns: 300px auto 300px</div> <div class="right">右边</div></article></section></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
第三天二列和三列布局文章出处：标准之路(/div_css/904.shtml)编辑：杨雨晨思今天学习《十天学会web标准(div+css)》的二列和三列布局，将涉及到以下内容和知识点▪二列自适应宽度▪二列固定宽度▪二列固定宽度居中▪xhtml的块级元素(div)和内联元素(span)▪float属性▪三列自适应宽度▪三列固定宽度▪三列固定宽度居中▪IE6的3像素bug一、两列自适应宽度下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。
首先创建html代码如下：<div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div>按照如图所示的创建方法，把两个div都创建出来，或手工写出代码。
div创建完成后，开始创建css样式表，代码如下：#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }先创建#side的样式，为了便于查看，设置了背景色。
注意，side的浮动设置为向左浮动；然后创建#main样式，注意这里设置#main的左边距为120px。
预览结果如下：三、两列固定宽度居中两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：<div id="content"><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></div>操作方法：在源代码里选中这两个div的代码后，点击工具栏上插入div按钮，填写i d后确定，得到如上的代码下面就需要设置#content的样式了，我们知道，#side的宽度为120px，#main 宽度为350px，那么#content的宽度应该为这两者之和，然后设置#content居中，那么整体就居中了：从上图的例子可以看出，块级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。
《CSS布局教程详解》CSS布局教程详解CSS（层叠样式表）是Web开发中不可或缺的一部分。
它不仅可以美化页面，还可以控制HTML元素的布局。
在Web开发中，页面布局是非常重要的一环。
一个好的页面布局可以增加用户体验，提高网站的可用性和可读性。
本篇文章将详细介绍CSS布局的各种方法和技巧。
一、基本布局1.流式布局：流式布局是指页面随着浏览器大小的变化而自适应调整大小。
可以通过设置宽度百分比（如width: 100%）实现。
2.定宽布局：定宽布局是指页面大小固定不变。
可以通过设置固定宽度（如width: 960px）实现。
3.弹性布局：弹性布局是指页面可变宽度、可变高度、可变间距。
可以通过设置flex布局实现。
二、布局技巧1. 圣杯布局：圣杯布局是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果。
2. 双飞翼布局：双飞翼布局也是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果，同时可以避免圣杯布局的一些负面效果。
3. 瀑布流布局：瀑布流布局是一种流式布局，通过设置每个元素的位置使其自然排列，适用于图片墙等排列不规则的布局。
4. 响应式布局：响应式布局是指页面针对不同设备（如手机、平板、电脑等）自适应调整大小和布局。
可以通过设置Media Query实现。
三、布局优化1. 减少HTTP请求：HTTP请求是影响网站性能的主要因素之一，可以通过合并CSS文件、缓存CSS等方式来减少HTTP请求。
2. 使用辅助工具：CSS布局的实现过程中，可以使用很多辅助工具来简化任务，如CSS预处理器、网格系统、框架等。
3. 确定元素大小：在对元素进行布局时，一定要确定其大小。
如果不确定大小，布局可能会出现问题，影响页面的美观度和用户体验。
四、总结CSS布局是Web开发中非常重要的一环，它可以影响页面的美观度、用户体验、可用性和可读性。
本文介绍了CSS布局的基本方法和各种技巧，并提出了优化布局的建议。
在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中实现这样的布局方式是简单可行的，只需在设置左栏的宽度即可，如上例中左右栏都采用了百分比实现了宽度自适应，而我们只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动，代码如下：
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 300px;
}
这样，左栏将呈现100%的宽度，而右栏将根据浏览器窗口大小自适应。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二列左列固定，右列宽度自适应——</title>
<style type="text/css">
<!--
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 300px;
}
-->
</style>
</head>
<body>
<div id="left">左列——固定()</div>
<div id="right">右列——宽度自适应()</div>
</body>
</html>
二列右列宽度自适应经常在网站在用到，不仅是右列，也可以是左列，方法是一样的，只需要改变两个div的编写即可，而这种应用在目前的许多blog都能够经常看到，如pjblog中的许多网友制作的模板就是这种布局的。
制作过程这里不再详细赘述，请参考上一教程：CSS网页布局入门教程5：二列宽度自适应，只需将左列的宽度改为200px，右列的宽度和向左浮动去掉即可。
如还有不明白地方您可以在评论中提问。
文章出处：标准之路(/div_css/266.shtml)。
