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. (转） C# textbox 限制输入问题

    原理:e.handled代表这次按键动作是否交由用户自己处理,如果为true代表由用户处理,系统不再过问,这里的应用是拦截,即通知系统我要处理这个数据,但又不处理(丢弃数据),从而实现拦截的效果. 在 ...

  2. OS X open finder here in terminal

    just type open .

  3. JSP SQL注入--破法

    1.JS验证拦截 <%@ page language="java" import="java.util.*" pageEncoding="UTF ...

  4. 死锁及oracle死锁--转载

    今天看群里在讨论数据库死锁的问题,也一起研究了下,查了些资料在这里总结下. 所谓死锁: 是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去. ...

  5. 使用pscp实现Windows 和 Linux服务器间远程拷贝文件

    转自:http://www.linuxidc.com/Linux/2012-05/60966.htm 在工作中,每次部署应用时都需要从本机Windows服务器拷贝文件到Linux上,有时还将Linux ...

  6. 【Unity Shaders】学习笔记——SurfaceShader（十一）光照模型

    [Unity Shaders]学习笔记——SurfaceShader(十一)光照模型 转载请注明出处:http://www.cnblogs.com/-867259206/p/5664792.html ...

  7. 关于Windows平台下应用程序加载DLL模块的问题.

    本文将讨论以下问题: (1)Windows可执行程序会从哪些目录下加载DLL. (2)如何将可执行使用的DLL放置到统一的目录下,而不是与EXE同一目录. (3)可执行程序加载了不该加载的DLL. ( ...

  8. Flex Alert的匿名回调函数如何得到正确的this

    Flex中经常使用Alert来弹出提示或确认窗口,为了方便省事,会直接用匿名函数作为回调,但有时如果要调用外部的this,你会发现匿名函数中的this无法指向外部父类,可以使用e.target获取pa ...

  9. 'UIShell.OSGi.MvcWebExtension.BundleRuntimeControllerFactory' did not return a controller for the name 'Home'.

    在使用osgi.net 框架的时候,有时会遇到这样的错误: 解决办法: 1. 检查项目文件夹下的 log 日志文件,因 osgi.net 在运行时(包括异常和操作)都会在项目的目录下生成 日志文件,并 ...

  10. No.001 Two Sum

    Two Sum Total Accepted: 262258 Total Submissions: 1048169 Difficulty: Easy Given an array of integer ...