div左右布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title ></ title > </ head > < body > <!-- 左侧 --> < div style = "width: 240px;float:left;height: 300px;background:#666; " > < button type = "button" onclick = "javascript:alert('test')" >右侧按钮1</ button > </ div > <!-- 右侧 --> < div style = "width:100%;float:right; margin-left:-250px;" > < div style = "margin-left:250px; height:300px;background:#666;" > </ div > </ div > </ body > </ html > |
该方式可以正常实现左右布局,但存在一个问题:由于采用浮动叠加方式,导致左侧div中的button无法点击。
解决办法:浮动元素添加position属性(如relative,absolute等)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title ></ title > </ head > < body > <!-- 左侧 --> < div style = "width: 240px;float:left;height: 300px;background:#666; position: relative;" > < button type = "button" onclick = "javascript:alert('test')" >右侧按钮1</ button > </ div > <!-- 右侧 --> < div style = "width:100%;float:right; margin-left:-250px;" > < div style = "margin-left:250px; height:300px;background:#666;" > </ div > </ div > </ body > </ html > |
div左右布局的更多相关文章
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV页面布局,开局代码
DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
随机推荐
- SparkSQL On Yarn with Hive,操作和访问Hive表
转载自:http://lxw1234.com/archives/2015/08/466.htm 本文将介绍以yarn-cluster模式运行SparkSQL应用程序,访问和操作Hive中的表,这个和在 ...
- 初探接口测试框架--python系列6
点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...
- 安装VS2015可能出现的问题以及解决方法
1.语言包问题 在官网上下载的版本是英文版,这就需要自己再去官网上下载一个中文安装包,很快的.不过需要2G内存.官网链接如下所示 https://www.microsoft.com/zh-CN/dow ...
- 网站图片优化-解码JPEG
首先,老大拿了两个网站工具的分析跟我说,让我分析一下我们网站的图片有没有什么方法优化. [网站分析工具]webpage test: http://www.webpagetest.org/谷歌pages ...
- 压缩上传并预览 flash
最近研究一个功能:用as3写的上传图片并实现预览.觉得花了很多时间也学到很多知识,将自己的所得记录下来供大家分享. 首先是预览功能的实现,大家自然而然就想到了loader来加载图片并显示,由于项目没有 ...
- 【练习】手工生成awr报告
①首先进入$ORACLE_HOME/rdbms/admin目录 [oracle@host02 ~]$ cd $ORACLE_HOME/rdbms/admin 该目录下 [oracle@host02 a ...
- the error code is 2203
权限不够 切换管理员再操作
- 学习总结 java 创建及其练习
创建: 打开eclipse—文件—新建—java项目—项目名称命名—点击texe-1练习下拉箭头—右击src—新建—类—设置类名称(名称设置时不要添加空格),在“想要创建哪些方法跟”下面点击:publ ...
- c++11 中的 move 与 forward
[update: 关于左值右值的另一点总结,请参看这篇] 一. move 关于 lvaue 和 rvalue,在 c++11 以前存在一个有趣的现象:T& 指向 lvalue (左传引用), ...
- Duilib学习笔记《03》— 控件使用
在前面已经对duilib有个一个基本的了解,并且创建了简单的空白窗体.这仅仅只是一个开始,如何去创建一个绚丽多彩的界面呢?这就需要一些控件元素(按钮.文本框.列表框等等)来完善. 一. Duilib控 ...