一小时搞定DIV+CSS布局-固定页面开度布局 - 程序园
博文评论:6
资源评论:0
积分与排名
阅读排行榜
一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。
转载请标明：
关于DIV+CSS布局中用到的CSS必备知识请看：
DIV+CSS布局中主要CSS属性介绍：
&&&&&& Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道&div&标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
&&&&&& Margin属性用于设置两个元素之间的距离。
&&&&&& Padding属性用于设置一个元素的边框与其内容的距离。
&&&&&& 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&DIV+CSS布局教程&/title&
&style type=&text/css&&
#Container{
width:1000
margin:0/*设置整个容器在浏览器中水平居中*/
background:#CF3;
background:#093;
padding-left:50
padding-top:20
padding-bottom:50
height:600
/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
margin-top:20/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
background:#0FF;
#Content-Left{
height:400
margin:20/*设置元素跟其他元素的距离为20像素*/
float:/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
#Content-Main{
height:400
margin:20/*设置元素跟其他元素的距离为20像素*/
float:/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
background:#90C;
margin-top:20
&div id=&Container&&
&div id=&Header&&
&div id=&logo&&这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。&/div&
&div id=&Content&&
&div id=&Content-Left&&Content-Left&/div&
&div id=&Content-Main&&Content-Main&/div&
&div class=&Clear&&&!--如何你上面用到float,下面布局开始前最好清除一下。--&&/div&
&div id=&Footer&&Footer&/div&
注解：Container作为整个页面的容器，控制着整个页面在浏览器的位置，此处使用margin:0控制Container容器在浏览器中水平居中，一般固定宽度的布局都会用到这就代码。
本文只讲述最基本的布局，在具体开发实践中可能会遇到浏览器兼容性等其他问题，遇到细节问题请自行百度解决，解决的多了经验就积累起来了。
所属分类：
推荐成功关注成功
收藏成功消息已发发送
您可能还喜欢页面布局CSS设置问题（应对浏览器尺寸改变）
[问题点数：40分]
页面布局CSS设置问题（应对浏览器尺寸改变）
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。有关 css 方面的问题，三列布局，中间不定宽自动改变宽度， - 跟谁学
搜索你想学的科目、老师试试，例如“书法”搜索吉安
&&有关 css 方面的问题，三列布局，中间不定宽自动改变宽度，希望得到大家的帮助~ 需要实现一个这样的效果： 中间的内容可以是 React 组件，可以是文字等任意的东西，提前不知道它的宽度值。 两边的线等长，随着中间的内容增加或者减少进行改变，但是和中间的文字总是保持一定的间隔。 总结起来就是 三列布局 ， 中间内容不定宽 ， 两边内容等宽 ，且可以 自适应中间内容 宽度的变化。 目前自己可以实现中间内容定宽的情况，但是不定宽的情况却做不出来，希望大家提供一些思路，感谢大家。
html 部分考虑到 React 无法操作伪元素，所以将伪元素换成了 span 标签 .horizontalLineWithContent {
text-align:
.horizontalFirstAdditionalLayer, .horizontalSecondAdditionalLayer{
border-top: 1px solid #
.horizontalFirstAdditionalLayer {
.horizontalSecondAdditionalLayer {
} 希望大家多多提供思路，多谢各位啦~~郝翔getchaimfeng
有考虑and背景因素吗？如果不考虑背景的话可以这样做：&body style="
text-align:
border-top: 1"&&span style="
background:
padding: 0 10"&and&/span&&/body&当然这只是方法之一，其它方法还有的，我再想想再来
golden_freeman_china
仔细看了遍问题...再答；po一个自己项目里面的：&html&&head&&/head&&style&
background-color: #
.sp_style_1{
line-height: 1
font-size:1
color:#333;
text-align:
.sp_style_1:before,.sp_style_1:after{
content:"";
border-bottom:2px solid #
width:40%;
.sp_style_1:before{
.sp_style_1:after{
.sp_style_2{
line-height: 1
font-size:1
color:#333;
text-align:
.sp_style_2:before{
content:"";
border-bottom:1px solid #CCC;
width:100%;
z-index:0;
.sp_style_2 a{
min-width:2
max-width:20
z-index:2;
background-color: #FFF;
padding:0 1
}&/style&&body&
&span class="sp_style_1"&或者您还可以&/span&
&p&&/p&&p&&/p&&p&&/p&
&span class="sp_style_2"&&a&或者您还可以&/a&&/span&&/body&&/html&
&!DOCTYPE html&&html lang="en"&&head&
&meta charset="UTF-8"&
&title&三栏固定流动布局&/title&
padding:0;
#main_wrapper{
/*min-width:600*/
/*max-width:100%;*/
width:100%;
padding:5px 10
background-color: #0d70b7;
text-align:
#threecolwrap{
width:100%;
background-color: #1ab394;
#twocolwrap{
width:100%;
margin-right: -210
background-color: #8a1f11;
padding:20px 0;
height:500
margin:0 10
margin-left: 150
margin-right: 210
background-color: #
padding:20px 0;
height:500
article&*{
margin:0 10
width:100%;
text-align:
background-color: #000000;
margin-bottom: 30
/*box-flex
其中box-flex设置伸缩项在伸缩容器中的所占比例，box-ordinal-group设置显示顺序，值越大越靠后
display: -webkit-
display: -moz-
padding:10
background-color: #00ada0;
-webkit-box-flex: 10;
-moz-box-flex: 10;
-ms-box-flex: 10;
box-flex: 10;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-box-ordinal-group: 2;
box-ordinal-group: 2;
#sidebar-right,
#sidebar-left{
padding:10
background-color: #0a6aa1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
#sidebar-right{
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-box-ordinal-group: 3;
box-ordinal-group: 3;
&/style&&/head&&body&
&div id="main_wrapper"&
&header&传统的实现方法&/header&
&div id="threecolwrap"&
&div id="twocolwrap"&
&!--left--&
&nav&&span&navnavnav&/span&&/nav&
&!--center--&
三栏中的右栏是210像素宽。为了给右栏特会给出空间，中栏的article元素有一个210像素的右外边距。当然，光有这个外边距只能把右栏再向右推210像素。但是，包围外栏和中栏的的两栏外包装上210像素的负右边距，会把右栏拉回article元素右外边距（在俩栏外包装内部右侧）创造的空间内，中栏article元素的宽度是auto，因此他仍然会力求占据浮动左侧剩余所有空间，可是，一方面，他自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右边距又把右栏拉回到该空间，总之，这个设计很巧妙
&/article&
&span&asideaside&/span&
&span&asideaside&/span&
&span&asideaside&/span&
&span&asideaside&/span&
&span&asideaside&/span&
&span&asideaside&/span&
&footer&footerffffffffffffffffffffffffffffffff&/footer&
&div id="box-flex"&
&header&Header&/header&
&div id="page"&
&div id="main"&
&h1&主内容&/h1&
&p&这里所用的伸缩盒模型是最老的一个版本，而且IE并不支持，但是Edge支持，firefox由于本身对display:box的解析不同，所有的伸缩项都是按照内联伸缩项解析，所以显示也不对&/p&
&div id="sidebar-left"&
&h1&左边栏&/h1&
&div id="sidebar-right"&
&h1&右边栏&/h1&
&footer&页脚&/footer&
&/div&&/body&&/html&
沃德天呐么帅
如果不考虑背景可以这样&!doctype html&&html&&head&&meta charset="utf-8"&&title&无标题文档&/title&&/head&&style type="text/css"&*{padding:0; margin:0; list-style:}.h3_title{ border-bottom:1px solid #666; text-align: height:20 margin-bottom:20line-height:40 font-size:16}.h3_title span{ display:inline- padding:0 10 background:#}&/style&&body&&h3 class="h3_title"&
&span&其他方式&/span&&/h3&&/body&&/html&
不知有没有考虑过table table-cell的做法
之前一个移动端页面做过类似需求html:&div class="title"&
&div class="cross-line"&&/div&
&span&云南.丽江&/span&&/div&css:.title{
height: 0.27
line-height: 0.27
font-size: 0.24
text-align:}.title .cross-line{
width: 100%;
background: #
z-index: 1;}.title span{
z-index: 10;
display: inline-
height: 0.27
background: #6
padding: 0 0.1}效果：
想到了一个完全能满足要求的方案，但是我相信一般人都不会这么做。就是把左边横线，中间文字，右边横线三个做成三个独立的无状态component，全部display:inline-block， vertical-alignment：top。然后设定中间文字的字号，比如1rem。之后render的时候计算文字长度length，那么就设定中间文字div（或者label）的宽度（考虑到中文比英文宽，我们优先满足中文宽度，如果怕不够，也可以设为每个文字1.1rem之类）为length x 1rem + （marginWidth x 2），然后左右两个横线的宽度就是 calc( 50% - (length x 0.5rem + marginWidth) )，并且使左右高度为中间高度的一半，再加上border-bottom就OK了
&!DOCTYPE html&&html lang="en"&&head&
&meta charset="UTF-8"&
&title&Title&/title&
.containerDiv{
height:500
background-color: #1A68A2;
border: 1px solid #
font-size: 0
width:10%;
min-width: 10
height:100%;
background-color:
display: inline-
.rightDiv{
display: inline-
width:10%;
min-width: 10
height:100%;
background-color:
.centerDiv{
width:80%;
height:100%;
background-color: #1e83c9;
display: inline-
&/style&&/head&&body&&div class="containerDiv"&
&div class="leftDiv"&&/div&
&div class="centerDiv"&&/div&
&div class="rightDiv"&&/div&&/div&&/body&&/html&
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心