div左右布局

时间：2021-02-25 09:40:27
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&plus;CSS布局中主要CSS属性介绍

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

  2. DIV&plus;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&plus;CSS布局-固定页面开度布局

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

  6. SEO为什么要求网页设计师用DIV&plus;CSS布局网页&quest;

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

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

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

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

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

  9. &lpar;转&rpar;div&plus;css 布局经验 - 最简单的 &equals; 最不变形的（原创技巧）

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

  10. &lpar;转&rpar;一小时搞定DIV&plus;CSS布局-固定页面开度布局

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

随机推荐

  1. hibernate4中使用Session doWork&lpar;&rpar;方法进行jdbc操作&lpar;代码&rpar;

    Hibernate3.3.2版本中getSession().connection()已被弃用,hibernate4中官方推荐使用Session doWork()方法进行jdbc操作 首先看看Work接 ...

  2. C&num;排序比较

    与C#定义了相等性比较规范一样,C#也定义了排序比较规范,以确定一个对象与另一个对象的先后顺序.排序规范如下 IComparable接口(包括IComparable接口和IComparable< ...

  3. Find them&comma; Catch them

    Find them, Catch them Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 36488 Accepted: 111 ...

  4. 加密数据的填充方式&lpar;Padding&rpar;

    1.填充数据为填充字节的长度 这种填充方式中,填充字符串由一个字节序列组成,每个字节填充该字节序列的长度.假定块长度为8,原文数据长度9,则填充字节数等于0x07:如果明文数据长度为8的整数倍,则填充 ...

  5. ssh登录命令（转）

    转:http://blog.csdn.net/edward_qing_lee/article/details/23133331 常用格式:ssh [-l login_name] [-p port] [ ...

  6. IOT-web替换某一个前台版本

    比如 替换endpoint 1,首先改写 package.json文件,记得去掉^,改写成某一个版本 2.删除相应的内容 3.执行 npm install 4.最后 build

  7. Cygwin、MinG、MSys区别与联系（转）

    转自:https://www.biaodianfu.com/cygwin-ming-msys.html 什么是Cygwin? Cygwin,原Cygnus出品(已被红帽收购),目前是RedHat名下的 ...

  8. loj6277

    题解: 树状数组模板提 代码: #include<bits/stdc++.h> using namespace std; ; int num[N],n,a[N],l,r,c,opt; vo ...

  9. Jenkins&plus;Ant&sol;maven&plus;Svn实现自动化部署，编译，运行，测试结果自动邮件通知

    Jenkins+Ant+Svn实现自动化部署,编译,运行,测试结果自动邮件通知

  10. 设计模式之工厂模式（Factory Pattern）

    一.什么是工厂模式? 1.“简单工厂模式”,Simple Factory Pattern 也就是常用的在Factory类中定义静态方法负责new对象的方式. 摘要中提到过“严格地说,这种被称为“简单工 ...

相关文章