zoukankan
html css js c++ java
三行两列DIV布局之左固定宽度
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
html
>
<
head
>
<
title
>
Untitled
</
title
>
<
style
type
="text/css"
>
body
{
}
{
/**/
/*
布局样式
*/
text-align
:
center
;
/**/
/*
这里,配合DIV的margin,设置DIV水平居中
*/
}
#layout_header, #layout_footer
{
}
{
/**/
/*
布局样式
*/
margin
:
0px auto
;
/**/
/*
水平居中
*/
width
:
98%
;
}
#layout_header
{
}
{
/**/
/*
这里可以自定
*/
height
:
50px
;
}
#layout_container
{
}
{
/**/
/*
布局样式
*/
margin
:
0px auto
;
/**/
/*
水平居中
*/
width
:
50%
;
/**/
/*
这里可以自定
*/
text-align
:
left
;
background-color
:
#CCE7FF
;
border
:
solid 1px red
;
}
#layout_right_layout
{
}
{
/**/
/*
布局样式
*/
width
:
100%
;
margin
:
2px 0px 2px -100%
;
float
:
right
;
}
#layout_right
{
}
{
/**/
/*
布局样式
*/
float
:
left
;
margin
:
0px 0px 0px 170px
;
/**/
/*
这里对应左侧栏的宽度
*/
/**/
/*
这里可以自定
*/
background-color
:
#fff
;
}
#layout_left
{
}
{
/**/
/*
布局样式
*/
float
:
left
;
width
:
160px
;
/**/
/*
左侧栏的宽度
*/
margin
:
2px 0px 2px 0px
;
/**/
/*
这里可以自定
*/
background-color
:
#eef6ff
;
}
</
style
>
</
head
>
<
body
>
<
div
id
="layout_header"
>
这里头
</
div
>
<
div
id
="layout_container"
>
<
div
id
="layout_right_layout"
>
<
div
id
="layout_right"
>
asdfasdf
<
table
style
="border:solid 1px red;100%;"
border
="0"
cellpadding
="0"
cellspacing
="0"
id
="lable"
>
<
tr
>
<
td
>
<
span
id
="ctl00_WebSiteNavigate1_labelPageDescription"
>
对会员进行查询列表
</
span
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
div
>
<
div
id
="layout_left"
>
这里写菜单
</
div
>
<
div
style
="clear: both;display: block"
>
</
div
>
<!--
这里解决FF 中 layout_container 高度不能自适应
-->
</
div
>
<
div
id
="layout_footer"
>
这里有版权
</
div
>
</
body
>
</
html
>
QQ:273352165 evlon#126.com 转载请注明出处。
查看全文
相关阅读:
SpringBoot详解(二)——
SpringBoot详解(一)——
数据库三大范式
Mysql备份
mysql索引
mysql事务
几种数据库查找的案例
点击加载更多
layer、弹出框
验证码倒计时
原文地址:https://www.cnblogs.com/evlon/p/1009286.html
最新文章
如何阻止事件冒泡和默认事件
es5中for...in 和es6中 for..of遍历
ajax获取的数据如何渲染到dom元素上
javascript中forEach()和jquery中each()的区别
xhtml和html的区别 html5和xhtml的区别
h5离线缓存
node.js 升级后报 node-sass 错误问题解决方法
封装js工具函数
关于面试?
单页面全屏滚动效果使用element 跑马灯组件实例
热门文章
vue-seamless-scroll 竖向滚动使用实例(nuxt.js)
函数柯里化
价格单位换算方法
数组对象去重 、两个数组对比去除相同项
Vue 项目性能优化方案
Spring5(七)——AOP注解
Spring5(六)——AspectJ(xml)
Spring5(五)——AOP
数据结构与算法(十一)——算法-递归
Elasticsearch
Copyright © 2011-2022 走看看