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 转载请注明出处。
查看全文
相关阅读:
分享微云普通用户不限速下载方法
PS基础之移动工具和分布对齐
操作系统的概念、功能和目标
又拍云+PicGo搭建图床教程
05 数组
04 循环结构
02 数据类型_变量_运算符_表达式
03 流程控制
05 方法_递归
win7下使用telnet的方法
原文地址:https://www.cnblogs.com/evlon/p/1009286.html
最新文章
SpringMVC——UTF8字符编码过滤器
1、springboot:入门项目
SpringMVC——访问静态资源,如jpg,js,css.
2、springboot:IDEA快速创建springboot项目
Eclipse:批量将Java源代码文件的编码从GBK转为UTF8
SpringMVC——参数绑定
Cisco路由器简明配置手册第二章广域网协议设置
C家一镜走天下的选择
如何用Redhat做路由器
windows蓝屏错误小全
热门文章
现在的网络饭可真不好吃
PHP以及LINUX主机通用去广告方法!
动网BBS数据库的详细说明(1)
163博客的不好
HP UX 双机操作命令
DOS下联网方式
Linux基本目录结构介绍
腾讯云COS对象存储+PicGo搭建图床教程
postman基本使用
分享冰点文库去广告版
Copyright © 2011-2022 走看看