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左右布局的更多相关文章

  1. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  2. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. DIV页面布局，开局代码

    DIV页面布局,开局代码 主要是style部分和body部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  5. DIV+CSS布局-固定页面开度布局

    DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

  6. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  7. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  8. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  9. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  10. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

随机推荐

  1. node在安装完成后,出现node不是内部或外部命令

    node在安装完成后,查看node版本 node -v出现"node不是内部或外部命令"郁闷. 各种搜索之后,处理好了问题了. 一张图解决问题.

  2. 生成ldf数据库文件

    .在我的电脑中删除LOG文件 c.附加数据库: 企业管理器--服务器--数据库--右键--附加数据库 此法将生成新的LOG,大小只有500多K

  3. ListView设置setFooterDividersEnabled无效的原因

    参考文章:http://gundumw100.iteye.com/blog/1169065 我的情况: 高度设置为了wrap_content, 且外边有一个FrameLayout(只包含了listvi ...

  4. HDU 1043 八数码 Eight A*算法

    Eight Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  5. Rman-03002,Rman-12010,Rman-12012

    为什么会出现如此的错误呢? 答:因为我们在分配通道时设备类型分配为磁带,但是你并没有安装磁带设备,所以就会出现这样的错误. 错误如下: 解决方法: 登陆你的目标数据库,重新进行设置,命令如下: con ...

  6. 机器学习算法一：K-近邻算法

    最近在<机器学习实战>里学习了一些基本的算法,对于一个纯新手我也在网上找了写资料,下面就我在书上所看的加上在其他博客上的内容做一个总结,博客请参照http://www.cnblogs.co ...

  7. 慕课网-安卓工程师初养成-2-2 认识Java标识符

    来源:http://www.imooc.com/code/1177 问:标识符是神马? 答:标识符就是用于给 Java 程序中变量.类.方法等命名的符号. 使用标识符时,需要遵守几条规则: 1.  标 ...

  8. 从100PV到1亿级PV网站架构演变

    如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 一个网站就像一个人,存在一个从小到大的过程.养一个网站和养一个人一样,不同时期需要不 ...

  9. 【PL/SQL练习】游标cursor ：oracle 在执行sql语句时，为sql语句所分配的一个私有的内存区域

    隐式游标:一次只能返回一行结果(不需要定义,默认自动建立)  显式游标: 需要开发人员提前定义,可以通过循环的方式处理游标里的sql语句,返回多行结果    隐式游标的属性:   sql%rowcou ...

  10. IIS 发布MVC 提示开启目录浏览

    修改应用池 托管管道模式为 集成