zoukankan
html css js c++ java
三列中右侧固定左边和中间可变
Code
<!
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"
>
<
head
>
<
title
>
test
</
title
>
<
style
type
= "text/css"
>
.main
{
}
{
width
:
450px
;
background
:
#cccccc
;
}
.content
{
}
{
float
:
left
;
width
:
150px
;
background
:
#999999
;
}
;
.left
{
}
{
float
:
left
;
margin-left
:
-150px
;
width
:
150px
;
position
:
relative
;
background
:
#999999
;
color
:
#000000
;
}
;
.content_center
{
}
{
float
:
right
;
margin-right
:
-150px
;
width
:
150px
;
position
:
relative
;
background
:
#333333
;
color
:
#ffffff
;
}
;
.middle
{
}
{
float
:
right
;
width
:
150px
;
}
;
.right
{
}
{
float
:
right
;
width
:
150px
;
}
;
.clear
{
}
{
clear
:
both
;
}
;
</
style
>
</
head
>
<
body
>
<
div
class
= "main"
>
<
div
class
= "content"
>
<
div
class
= "content_center"
>
<
div
class
= "left"
>
左侧可变内容,左侧可变内容
</
div
>
<
div
class
= "middle"
>
中间可变内容,中间可变内容,中间可变内容,中间可变内容
</
div
>
</
div
>
</
div
>
<
div
class
= "right"
>
右侧固定内容
</
div
>
<
div
class
= "clear"
></
div
>
</
div
>
</
body
>
</
html
>
注意:使用该样式的时候,一定要知道固定内容的确切高度,定义可变内容的高度与固定内容的高度相同。
适用情况:三列中只有一列的内容固定。
查看全文
相关阅读:
Java内部类与外部类的那些事
TCP那些事
Java的垃圾回收和内存分配策略
HTTP的客户端识别与cookie机制
HTTP缓存
HTTP连接管理
Java Native Interface 六JNI中的异常
Java Native Interface 五 JNI里的多线程与JNI方法的注册
Java Native Interface 四--JNI中引用类型
Java Native Interfce三在JNI中使用Java类的普通方法与变量
原文地址:https://www.cnblogs.com/ada313/p/1564300.html
最新文章
持久化ORM框架——Hibernate与mybatis
Java 垃圾回收机制(早期版本)
抛开深层次底层,快速入门SpringMVC
Spring 学习笔记(八)—— 注解使用整合
Mybatis映射器源码解析
Github出暗黑模式了,加班写代码不再刺眼啦!
Mybatis中重要组件的生命周期
GitHub 开源项目文章爬虫,懒人必备!
Mybatis数据源结构解析之连接池
mybatis整体架构以及执行流程
热门文章
Spotlight on MySQL 参数详解-数据库监控软件
接口测试概念及测试工具
RocketMq 测试
MONyog使用图解
Python 二分法
性能测试通过标准
jmeter 聚合报告参数详解及TPS 解析
rocketmq-console 控制台使用详解
软件测试分类
制作CentOS 7.3安装U盘与安装CentOS 7.3操作系统
Copyright © 2011-2022 走看看