两个div如何并列 (转)
两个div如何并列?当用到div+css代替table时,我习惯用两个方法:
1
<div id="parent">
<div id="child_1"></div>
<div id="child_2"></div>
</div>
<style>
#parent{width:170px;}
#child_1{float:left;width:85px;}
#child_2{margin-left:auto;width:85px;}
</style>
使用上面方法,可以构成<td></td><td></td>的效果,但是parent.width>child_1.width + child_2.width,如果child_1.width + child_2.width>=parent.width时则两列不能并列。我用此方法在ie6下是设parent的背景色接近child_1和child_2中间的接近颜色来消除间隔。总的来说,此方法我刚开始时经常用,但现在我用下面的方法。
2
<div style="width:200px;">
<div style="float:left; width:100px;"></div>
<div style="float:left;width:100px;"></div>
</div>
此方法可以在一个div里面放多个div,可以并列多个div,当然方法一也可以并列多个div.
两个div如何并列 (转)的更多相关文章
- 两个DIV并排显示
今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...
- div+css:两个div并排等高 (table-cell)
两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
- 两个div叠加触发事件发生闪烁问题
今天遇到一个问题,想实现一个功能: 当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发div1的 ...
- css两个form不换行,两个div并排代码
1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...
- html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...
- 如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- 两个div之间有空隙
加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
随机推荐
- HTML5 移动开发(CSS3设计移动页面样式)
1.如何创建CSS样式表 2.CSS3的卓越特性 3.基于设备属性改变样式的媒体查询 4.如何使用属性改变元标签创建更美观移动页面 层叠样式表是移动WEB开发中的一个重要组成部分,本次分享将学到如 ...
- GBDT理解
一.提升树 提升方法实际采用加法模型(即基函数的线性组合)与前向分布算法.以决策树为基函数的提升方法称为提升树,boosting tree.对分类问题的决策树是二叉分类树,对回归问题的决策树是二叉回归 ...
- Shell命令行中特殊字符与其转义详解(去除特殊含义)
特殊符号及其转义 大家都知道在一个shell命令是由命令名和它的参数组成的, 比如 cat testfile, 其中cat是命令名, testfile是参数. shell将参数testfile传递给c ...
- 洛谷 P5206: bzoj 5475: LOJ 2983: [WC2019] 数树
一道技巧性非常强的计数题,历年WC出得最好(同时可能是比较简单)的题目之一. 题目传送门:洛谷P5206. 题意简述: 给定 \(n, y\). 一张图有 \(|V| = n\) 个点.对于两棵树 \ ...
- android 通用 Intent
通用 Intent 本文内容显示详细信息 闹钟 日历 相机 联系人/人员应用 电子邮件 文件存储 本地操作 地图 音乐或视频 新笔记 电话 搜索 设置 发送短信 网络浏览器 使用 Android 调试 ...
- 0行代码实现任意形状图片展示--android-anyshape
前言 在Android开发中, 我们经常会遇到一些场景, 需要以一些特殊的形状显示图片, 比如圆角矩形.圆形等等.关于如何绘制这类形状, 网上已经有很多的方案,比如自定义控件重写onDraw方法, 通 ...
- JavaScript之this学习心得
this在运行时绑定,并不是在编写时绑定,它的上下文取决于函数调用的各种条件.this既不指向自身,也不指向函数的词法作用域.this是在函数被调用时发生的绑定,指向什么完全取决于函数在哪里被调用. ...
- 细说MySQL备份的基本原理(系列一 ) 备份与锁
数据库作为一个系统中唯一或者主要的持久化组件,对服务的可用性和数据的可靠性要求极高. 作为能够有效应对因为系统软硬件故障.人工误操作导致数据丢失的预防手段,备份是目前最为常见的数据库运维操作. 考虑到 ...
- Laravel Model 的 fillable (白名单)与 guarded (黑名单)
例如 protected $fillable = ['name']; protected $guarded = ['price']; 定义了 name 字段可以写入/修改,而 price 字段不可以. ...
- CAS单点登录安装笔记
http://lib.iteye.com/blog/166619 https://www.cnblogs.com/zhenyulu/archive/2013/01/22/2870838.html