div左右布局

最新推荐文章于 2024-02-18 19:14:26 发布
最新推荐文章于 2024-02-18 19:14:26 发布
阅读量363 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zangao/p/6094142.html
版权
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 >

转载于:https://www.cnblogs.com/zangao/p/6094142.html

Teeth1017
关注
div 布局_CSS笔记—左右布局
weixin_39757739的博客
11-29 1270
css左右布局是实现前端页面设计的基础，大部分的布局方式都能分割成左右布局，因此理解左右布局，能使我们在初学css的时候更快理解其他复杂的布局方式。下面是我罗列的几种css实现前端左右布局的方式：1.position: absolute实现在父级元素内设置两个子元素，绝对定位它们，然后使用百分比将它们分成左右两部分。 这里的好处是，有两个可以容纳自己内容的独立容器。<2.table实现tab...
DIV左、右布局
weixin_30413739的博客
03-14 320
1、右边宽度固定，左边自适应 　　第一种(flex布局，不兼容IE9以下浏览器)： <style> body { display: flex; } .left { background-color: aqua; height: 200px; flex: 1; } ...
DIV 左右布局方案
热门推荐
又言又语
03-01 7万+
DIV 左右布局方案
html5的div左右布局方面问题(1)
01-08
最近我的Web前端老师发布了一项作业，内容其中有关于内容如何布局问题方面，其实这个作业完全是可以看我上一篇文章来做的，但老师并没有说到用 来做，而且老师要求的是用布局，而不是表格，这俩个概念是不能搞混，...
div布局简单网站模板
04-02
本教程将深入探讨`div`布局在构建简单网站模板中的应用，以及与之相关的`花`布局概念。 首先，让我们理解`div`布局的基本原理。`div`元素本身没有特定的语义，它的主要作用是作为一个容器，用于包裹其他HTML元素，...
简单div布局网站模板
04-02
综上，"简单div布局网站模板"涵盖了网页设计的基本元素、CSS布局技巧以及简洁设计原则，对于初学者或快速构建网页的开发者来说，是一个很好的学习和实践资源。通过理解并运用这些知识点，可以有效提升网页的美观度和...
DIV+CSS DIV居中布局
03-19
本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`<div>`元素。`<div>`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`<div>`...
css div左右布局两种方式示例代码
11-15
css div左右布局两种方式示例代码，兼容性好，复制即用。
Div+CSS 布局大全
01-06
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构， 然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该 转换成对应的什么 CSS 语句。当你解决了第一种问题，知道了如何结构化你的 HTML，我再给出一个列表，详细列出原来的表 现属性用什么 CSS 来代替。 结构化 HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原表现在页面上。 如果你希望你的 HTML 页面用 CSS 布局(是 CSS-friendly 的)，你需要回头重来，先不考虑“外观”，要先思考你的页面 内容的语义和结构。 外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来，CSS Zen Garden 是一个典型的例子。CSS Zen Garden 帮助我们最终认识到 CSS 的强大力量。 HTML 不仅仅只在电脑屏幕上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电话和屏幕阅读机上。但 是一个结构良好的 HTML 页面可以通过 CSS 的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的 目的，然后再根据这些内容目的建立起相应的 HTML 结构。
左右两边div布局
xiaopeng__的专栏
12-06 2678
常用的自适应布局 左边固定右边自适应 _margin-right:-3px;   右边+overflow+zoom
HTML板块左右排列布局——左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面
qq_68725483的博客
02-18 1119
我们可以借助CSS中的 float 属性来实现。
html div 内部左右布局,div布局大全
weixin_39999209的博客
06-05 5238
div+css布局还有哪些布局方式LZ说的框架是不是frame,框架适用于后台管理界面,一般顶部或左侧是功能菜单,右侧是内容显示页面而DIV+CSS是前台界面各模块设计,两者没交集,html 用div布局的问题要用div 做像 这样的布局 ， css该怎么写？div2 div3 css: body,div {padding:0;margin:0;} .div1 {width:504px;borde...
如何让div左右布局
welcome to daijiguo's blog
07-06 5214
div的布局默认是上下布局，要想左右布局，只要在第一个div里面加入float:left
div布局
前景
11-01 1269
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" conten
DIV 布局之左右布局左侧固定右侧自动适应
10-27 885
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Pragma" content="no-cache"> <meta ht...
div 左右排列 高度自适应_css实现div两列布局（两种方法）
weixin_39933336的博客
11-29 9198
一、应用场景左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应二、思路首先把这个问题分步解决，需要攻克以下两点：1、让两个div并排到一行2、让一个div宽度固定，另个div占据剩下宽度的空间关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；关于第二点，首先有一个宽度固...
htmldiv左右布局
最新发布
09-20
这里简单介绍Flexbox布局下的左右布局： 1. **设置父元素**： 使用 `display: flex;` 将父容器设为弹性盒子模型，这会使内部子元素自动沿主轴（默认是横轴）排列。 ```html <div class="container"> <div class=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值