两个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如何并列 (转)的更多相关文章

  1. 两个DIV并排显示

    今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...

  2. div+css:两个div并排等高 (table-cell)

    两个div并排等高 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  3. 如何让两个div在同一行显示?一个float搞定

    最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...

  4. 两个div叠加触发事件发生闪烁问题

    今天遇到一个问题,想实现一个功能: 当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发div1的 ...

  5. css两个form不换行,两个div并排代码

    1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...

  6. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  7. 如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  8. 两个div之间有空隙

    加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...

  9. DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度

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

随机推荐

  1. PHP中GET和POST区别

    1. get是从服务器上获取数据,post是向服务器传送数据.2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过H ...

  2. JSBinding+Bridge.NET:Inspector拖变量支持

    之前的文档说了,JSB的设计是不允许gameObject上挂逻辑脚本的.原因很简单,在Js工程中根本就不存在C#形式的逻辑脚本,如果在Cs工程中挂上了,到了Js工程这边,直接Missing. 实际在使 ...

  3. Linux - awk 文本处理工具三

    AWK 文件打印匹配 格式示例 awk '/Tom/' file # 打印匹配到得行 awk '/^Tom/{print $1}' # 匹配Tom开头的行 打印第一个字段 awk '$1 !~ /ly ...

  4. HDU 1501 Zipper 字符串

    题目大意:输入有一个T,表示有T组测试数据,然后输入三个字符串,问第三个字符串能否由第一个和第二个字符串拼接而来,拼接的规则是第一个和第二个字符串在新的字符串中的前后的相对的顺序不能改变,问第三个字符 ...

  5. (F. MST Unification)最小生成树

    题目链接:http://codeforces.com/contest/1108/problem/F 题目大意:给你n个点和m条边,然后让你进行一些操作使得这个图的最小生成树唯一,每次的操作是给某一条边 ...

  6. 奈奎斯特定理 and 香农定理

    -----------------------整理自<21ic电子网> 奈奎斯特定理(Nyquist's Theorem)和香农定理(Shannon's Theorem)是网络传输中的两个 ...

  7. git merge branch to master

    git checkout master git pull git merge testbranch git push

  8. linux中Shell标准输出错误 >/dev/null 2>&1 分析【转】

    Shell中可能经常能看到:>/dev/null  2>&1 eg:sudo kill -9 `ps -elf |grep -v grep|grep $1|awk '{print ...

  9. asp.net防SQL/JS注入攻击:过滤标记

    /// <summary>/// 过滤标记/// </summary>/// <param name="NoHTML">包括HTML,脚本,数据 ...

  10. 部分Web服务器信息对比

    本文参考wikipedia的Web服务器比较页面的数据,选取了其中自己感兴趣的Web服务器的信息进行了对比,包括,Apache HTTP Server.Apache Tomcat.Nginx.Catt ...