可扩展性的页面布局：左右结构，左中右结构

XBaron 发布于2019-08-28 17:51 / 3155人阅读

摘要：左右结构，左边右边宽度固定左右结构，左边固定，右边左中右结构，左边固定，右边固定，中间这里是左边这里是中间这里是右边

左右结构，左边100%；右边宽度固定

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

HTML

左右结构，左边固定，右边100%

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar{float:left; width:200px; margin-top:10px; height:200px;    background:#AAA;}
#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html

左中右结构，左边固定，右边固定，中间100%;

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}
#main {margin-left:438px; background:#999; height:200px;}
#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html




    这里是左边
    
        这里是中间
    
    这里是右边

GPU云服务器云服务器左中右 html表格左中右 html多页面结构 html5页面结构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110829.html

CSS基础篇--页面实现两列布局，一列固定宽度，一列宽度自适应方法

摘要：不管是左是右，反正就是一边宽度固定，一边宽度自适应。博客园的很多主题也是这样设计的，我的博客园博客也是右侧固定宽度，左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现，的实际宽度就是屏幕宽度。我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式：1.左右结构，左边100%；右边宽度固定2.左右结构，左边固定，右边100%...

RichardXG 2019-08-28 17:51 评论0 收藏0
CSS基础篇--可扩展性的页面布局

摘要：左右结构，左边右边宽度固定代码代码左右结构，左边固定，右边代码代码左中右结构，左边固定，右边固定，中间代码代码这里是左边这里是中间这里是右边 1.左右结构，左边100%；右边宽度固定 showImg(http://segmentfault.com/img/bVbSYw); css代码： #header{height:80px; background:#CCC;} #center{ov...

CarlBenjamin 2019-08-28 17:51 评论0 收藏0
布局总结-水平居中布局的实现

摘要：布局一左右布局实现左右布局居中布局的几个实现方案标签结构很简单，就是一个父元素里面套了一个子元素想要实现左右布局，只需要把设置成向左浮动，右边向右浮动或者把和设置成二居中布局结构居中布局的几个实现方案标签结构很简单，就是一个父元素 CSS布局一、左右布局 1、float实现左右布局 ...

MadPecker 2019-08-01 17:42 评论0 收藏0
布局总结-水平居中布局的实现

摘要：布局一左右布局实现左右布局居中布局的几个实现方案标签结构很简单，就是一个父元素里面套了一个子元素想要实现左右布局，只需要把设置成向左浮动，右边向右浮动或者把和设置成二居中布局结构居中布局的几个实现方案标签结构很简单，就是一个父元素 CSS布局一、左右布局 1、float实现左右布局 ...

starsfun 2019-08-30 15:53 评论0 收藏0
三栏布局的n种实现

摘要：本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。每一种布局都会有个，个人依然认为文章里帖代码并没有来的直接。其中讨论了这么多种种布局，有以下理由是每种布局也都有他的毛病，没有十全十美的，每种布局也都有人在用。本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。至于其他类型，基本上也就是半斤和八两。每一种布局都会有个Demo，个人依然认为文章里帖代码并没有Demo来的直接。...

aisuhua 2019-08-29 10:54 评论0 收藏0