两个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. css左右等高问题

    先看看预览效果:http://lgdy.whut.edu.cn/index.php?c=home&a=detail&id=3394 再来谈谈css左右等高的应用场景:在内容管理系统(c ...

  2. THINKPHP中使用swoole

    首先,运行swoole服务端程序要在命令行模式下运行php文件,所以thinkphp要设置成命令行模式运行,在入口文件中增加一个配置即可: define(‘MODE_NAME’,‘cli’); 然后运 ...

  3. CSS 编码中超级有用的工具集合

    当你开发网站和 Web 应用时,使用合适的工具可以节省大量的时间.本文我将收集一些非常有用的 CSS 编码工具,希望对你有帮助. Pure CSS Pure 是来自雅虎的 CSS 框架,使用 Norm ...

  4. [R语言]关联规则1---不考虑items之间的时序关系

    本文介绍的是关联规则,分为两部分:第一部分是---不考虑用户购买的items之间严格的时序关系,每个用户有一个“购物篮”,查找其中的关联规则.第二部分--- 考虑items之间的严格的时序关系来分析用 ...

  5. [BZOJ 1032][JSOI 2007]祖玛 题解(区间DP)

    [BZOJ 1032][JSOI 2007]祖玛 Description https://www.lydsy.com/JudgeOnline/problem.php?id=1032 Solution ...

  6. 【译】SQLskills SQL101:Trace Flags、ERRORLOG、Update Statistics

    最近阅读SQLskills SQL101,将Erin Stellato部分稍作整理.仅提取自己感兴趣的知识点,详细内容请阅读原文. 一.Trace Flags推荐开启三个跟踪标记1118.3023.3 ...

  7. 主流服务器apache,iis,tomcat,jboss,resion,weblogic,websphere的区别

    在互联网高速发展的今天,不同种类的网站大量涌现,每个人都在享受着网络服务带来的便利.而创建自己的个性化网站的门槛不断降低.从事网站架构,这种当年的绝对“”高科技“”绝活.也从it人员的专利“”沦落“” ...

  8. python2.7中MySQLdb的安装与使用详解

    Python2.7中MySQLdb的使用 import MySQLdb #1.建立连接 connect = MySQLdb.connect( '127.0.0.1', #数据库地址 'root', # ...

  9. ckeditor:基本使用方法

    引用网址:http://blog.sina.com.cn/s/blog_6961ba9b0102wwye.html 1.获得值 var editor=CKEDITOR.replace( 'editor ...

  10. free命令中的buffer和cached的比较(转)

    原文链接:https://www.jianshu.com/p/cd2dd59d1566 最近在搞监控,突然看到我系统的内存要用完了,赶紧登录服务器看看, ~]# dstat -m     16G内存就 ...