CSS左中右布局，规范案例

html部分

<body>  <form id="form1" runat="server">  <div id="wrap">  <div id="header">header</div>  <div id="container">  <div id="left_side">left_side</div>  <div id="content">content</div>  <div id="right_side">right-side</div>  </div>  <div id="footer">footer</div>  </div>  </form>
</body>

css部分

<style type="text/css">#wrap{  width:700px;  margin:0 auto;  }  #header{  margin:20px;  height:80px;  border:solid 1px #0000FF;  }  #container{  position:relative;  margin:20px;  height:400px;  }  #left_side{  position:absolute;  top:0px;  left:0px;  border:solid 1px #0000FF;  width:170px;  height:100%;  }  #content{  margin:0px 190px 0px 190px;  border:solid 1px #0000FF;  height:100%;  }  #right_side{  position:absolute;  top:0px;  right:0px;  border:solid 1px #0000FF;  width:170px;  height:100%;  }  #footer{  margin:20px;  height:80px;  border:solid 1px #0000FF;  }
</style>

　　说明

1、在#container中设置“position:relative;”，其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准。

2、左侧列#left_side和右侧#right_side列采用绝对定位，并且固定这两个div的宽度，而中间列#content由于需要根据浏览器自动调整，因此不设置类似属性。

但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px。

转载于:https://www.cnblogs.com/jiqing9006/p/4983980.html

CSS左中右布局，规范案例相关推荐

html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
Vue大屏实战二：页面三分实现左中右布局
文章目录 1.最终效果 2.左中右布局 3.页面样式 4.页面逻辑 1.最终效果页面整体效果 2.左中右布局 <div><div cla ...
html左中右自适应布局,CSS左中右自适应布局六种方案与原理
css虽简单,但细节多,技巧性高,易学难精. 如何实现左右固定300px , 中间宽度自适应? 有如下结构左右中公有样式, 设置高,设置左右宽度固定300px,左右为红色,中间为黄色. .it ...
HTML中的div怎么左中右布局,CSS 之 div 左中右布局
无标题文档 #header{ width:780px;height:80px;background:#069;margin:0 auto; } #box { width:780px; margin:0 ...
Android 布局左中右布局
2019独角兽企业重金招聘Python工程师标准>>> 首先在LinearLayout·中设置了orientation为horizon,试着layoutGravity:left ri ...
典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
html 左中右如何布局,CSS 布局
左右布局 1.浮动布局左边元素左浮动,右边元素加上margin-left,实现左边固定,右边自适应的左右布局 html left right CSS *{ margin:0; padding:0; ...
【HTML5CSS3进阶学习02】Header的实现·CSS中的布局
前言我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...
CSS多列布局（实例）
前言一列布局二列布局三列布局 1 一列布局一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...

CSS左中右布局，规范案例

CSS左中右布局，规范案例相关推荐

最新文章

热门文章