div 并列办法

标签: CSS
3人阅读 评论(0) 收藏 举报
分类:

    在CSS中,div为块状元素,会自动实现换行效果。因此若有多个div结构要实现并列,可以使用如下方法:

1. float:left 方法

HTML:

<div id="testOne">testOne</div>
<div id="testTwo">testTwo</div>
CSS:
#testOne{
    float:left;
}
#testTwo{
    float:left;
}

但要注意,在用float:left的方法过程中,应注意多个div加起来的总宽度不能超过页面总宽度,超过的话自然会往下面继续排。



2. display:inline 方法

HTML:

<div id="testOne">testOne</div>
<div id="testTwo">testTwo</div>
CSS:
#testOne{
    display:inline;
}
#testTwo{
    display:inline;
}

查看评论

DIV CSS入门应该这么学

DIV、CSS的知识点,从浅入深,化繁为简,快速带您进入Web开发的世界。帮助你快速实现从入门到实战的转变,逐步迈向Web前端开发工程师的高新行列。
  • 2017年09月24日 20:17

浅谈实现两个div并列的多种方法

方法一:float #div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; hei...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-16 11:10:26
  • 1679

怎么样让多个div并列?

怎么样让多个div并列? 使用css方法:float:left;         .section {             width: 21.7%;           ...
  • LucasLi2016
  • LucasLi2016
  • 2016-12-17 18:15:51
  • 688

html 并列多个DIV

1.html 并列多个DIV多种显示方式。 style type="text/css"> #pages {width:900px;background-color:black;margin:a...
  • cw2004100021124
  • cw2004100021124
  • 2014-10-20 10:45:10
  • 1454

html 两个div并列显示

无标题文档 .div1 { float:left; width:175px; height:20px; } .div2 { width:175px; height:20px; float:le...
  • macwhirr123
  • macwhirr123
  • 2012-06-06 14:31:52
  • 9839

两个DIV并列排在一个大的DIV中

今天突然碰到排版问题,对于我们这些不用那些网页制作软件的人来说,这个有时候还真的是个大难题。      如题,终于解决了。      css代码如下:      #page { margi...
  • wolinxuebin
  • wolinxuebin
  • 2012-05-29 17:29:33
  • 30348

3个div并列居中

#wrapper { width:700px; clear:both; margin:0 auto; text-align:center; } #first { backgr...
  • weiyanghuadi
  • weiyanghuadi
  • 2015-05-08 02:21:15
  • 490

两个并列的div,一个确定宽度一个自动调整

*{ margin:0; padding:0}html{ overflow-x:hidden}#wrap{float:left; width:auto; margin:0 300px 0 0; bac...
  • hongjue
  • hongjue
  • 2007-09-17 13:49:00
  • 3959

四个div并列一行展示

.first {        float:left;        display:inline;        width:22%;        line-height:35px;  ...
  • zhanglongfei1016
  • zhanglongfei1016
  • 2013-05-07 16:04:45
  • 1704

让两个Div并排显示的多种方法

http://www.jb51.net/css/140705.html 让两个Div并排显示的方法有很多,使用display的inline属性、通过设置float来让Div并排显示都可以实现...
  • liukuan73
  • liukuan73
  • 2016-07-13 08:45:03
  • 3513
    个人资料
    等级:
    访问量: 918
    积分: 129
    排名: 116万+
    文章存档