两个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充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
随机推荐
- 第9月第16天 tolua++ cocos2dx cocos2d-lua
1. http://www.jianshu.com/p/1cdfc60da04f 2.lua c++ Lua访问C++类 现在,我们在Lua里面操作这个Student类.注意,我们绑定的每一个函数都需 ...
- 各浏览器 position: fixed 造成的bug 通用解决办法,Safari, iOS
将原来使用 position: fixed 的元素外层包裹一个 div.fixedWrapper .fixedWrapper { width: 100%; overflow: hidden; pos ...
- 『实践』Yalmip+Ipopt+Cplex使用手册
Yalmip+Ipopt+Cplex使用手册 1.软件版本 Cplex 12.6.2,Matlab R2014a,Ipopt 3.12.9,Yalmip 2.Cplex添加方法 官方下载地址: htt ...
- rank over partition by
高级函数,分组排序 over: 在什么条件之上. partition by e.deptno: 按部门编号划分(分区). order by e.sal desc: 按工资从高到低排序(使用rank() ...
- emulator: ERROR: x86 emulation currently requires hardware acceleration!Please ensure Intel HAXM is properly installed and usable.CPU acceleration status: HAX kernel module is not installed!
Android Studio 1.0 已经放出来了,以后的Android平台开发激昂逐步从Eclipse向Android Studio迁移,为了能不落伍我也特意从Google下载了Android St ...
- 【最简单的方法】js判断字符串是否为JSON格式(20180115更新)
前言 针对 “js判断字符串是否为JSON格式” 这个问题,在网上查了许多资料,都没找到自己想要的答案. 但是看到这个帖子<js判断字符串是否为JSON格式>后,突然灵光一闪,想到一种很简 ...
- PHP中curl模拟post上传及接收文件
public function Action_Upload(){ $this->path_config(); exit(); $furl="@d:\develop\JMFramewor ...
- Linix下修改mysql服务器编码
1. 找到mysql的配置文件,拷贝到etc目录下,第一步很重要 把/usr/share/doc/mysql-server-5.1.52/my-large.cnf 复制到 /etc/my.cnf 即用 ...
- HttpUrlConnection的setDoOutput与setDoInput的区别
httpUrlConnection.setDoOutput(true) httpUrlConnection.setDoInput(true) 这两个方法在develope的httpUrlConnect ...
- SVN使用过程中遇到的一些问题
更新svn的客户端TortoiseSVN后 ,之前使用svn管理的文件的关联图标消失了 说明:下面的解决方法及图片来自博客:装了SVN,你的关联图标变了没有? 解决办法:在同步的文件点击右键如下图 ...