两个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充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
随机推荐
- tensorflow的卷积和池化层(二):记实践之cifar10
在tensorflow中的卷积和池化层(一)和各种卷积类型Convolution这两篇博客中,主要讲解了卷积神经网络的核心层,同时也结合当下流行的Caffe和tf框架做了介绍,本篇博客将接着tenso ...
- CF359B Permutation (构造)
CF359B Permutation \(solution:\) 作为一道构造题,这题也十分符合构造的一些通性----(找到一些规律,然后无脑循环). 构造一个长度为 \(2n\) 的排列 \(a\) ...
- 记webpack下引入vue的方法(非.vue文件方式)
直接script引入下载静态的vue.js文件则最后用copy-webpack-plugin复制到一样的目录即可 使用npm安装的vue无法直接用 import vue from "vue& ...
- [LeetCode] Candy (分糖果),时间复杂度O(n),空间复杂度为O(1),且只需遍历一次的实现
[LeetCode] Candy (分糖果),时间复杂度O(n),空间复杂度为O(1),且只需遍历一次的实现 原题: There are N children standing in a line. ...
- poj1033
模拟题,注意不需要移动的情况要特殊输出 #include <cstdio> #include <cstring> #include <cstdlib> using ...
- sonar Lint ----code bad smell
类名注释报黄: 去掉这段黄做法:alt+enter 本文参考: http://www.cnblogs.com/xxoome/p/6677170.html
- Windows环境下python的安装与使用
Windows环境下python的安装与使用 一.python如何运行程序 首先说一下python解释器,它是一种让其他程序运行起来的程序.当你编写了一段python程序,python解释器将读取程序 ...
- mkfs
mkfs 命令 linux格式化磁盘命令 指令:mkfs 使用权限 : 超级使用者 使用方式 : mkfs [-V] [-t fstype] [fs-options] filesys [blocks ...
- SqlServer Case when then用法总结
SELECT d.DicName , --DevelopMode ISNULL(NULL,NULL) , --Orgid b.FullName , --Areid c.DicName , --Inve ...
- hdu 5011 nim博弈 (2014西安网赛E题)
n堆石子,每次可以选一堆取走至少一个,之后你可以不操作或者把该堆石子分成两堆,每堆至少一个,和还是原来(取完石子后)的石子个数. Sample Input1121 131 2 3 Sample Out ...