css:

 .div-inline{ display:inline}

html:

 <div class="div-inline">第一个div盒子</div>

 <div class="div-inline">第二个盒子</div>

 <div class="div-inline">第三个盒子</div>

完整代码：

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <style type="text/css">

 .div-inline{ display:inline}

 </style>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

 <hr>

 <div class="div-inline">第一个div盒子</div>

 <div class="div-inline">第二个盒子</div>

 <div class="div-inline">第三个盒子</div>

 </body>

 </html>

三个div并排

三个div并排的更多相关文章

  1. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  2. NO.14 两个div并排，左边为绝对宽度，右边为相对宽度

    两个div并排,左边为绝对宽度,右边为相对宽度,这个问题,我也经常遇到,我一般的处理方法是将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后ri ...

  3. 让两个Div并排显示

    一.使用display的inline属性 <div style="width:300px; height:auto; float:left; display:inline"& ...

  4. html中怎么样让div并排显示

    html中的div默认是流式显示,每个div会占用一整行 <html> <head> <meta http-equiv="Content-Type" ...

  5. 在HTML中实现两个div并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...

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

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

  7. css两个form不换行，两个div并排代码

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

  8. xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  9. 两个DIV并排显示

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

随机推荐

  1. C# 中类的成员有哪些？

    类(class)是C#类型中最基础的类型.类是一个数据结构,将状态(字段)和行为(方法和其他函数成员)组合在一个单元中.类提供了用于动态创建类实例的定义,也就是对象(object).类支持继承(inh ...

  2. Down State Flush Feature

    Down State Flush Feature ========================================================== Citrix NetScaler ...

  3. js原生方法的重写

    讲干货,不啰嗦,通过prototype可以获取到JavaScript的原型对象,进而可以在对象原型上添加新的属性和方法,当该方法与原方法名称一样时会覆盖原方法既:重写,当不一样时既:添加 如:实现数组 ...

  4. 5.Redis的持久化

    Redis中数据的持久化有两种方式:RDB(Redis DataBsse) 和 AOF(Append Only File),默认采取的是RDB方式 RDB 1.是什么:在指定的时间间隔内将内存中的数据 ...

  5. m3u8系列（一）练手spider

    本次目标 http://www.qiqi.la/vod-detail-id-46194.html 目的,down魔道祖师,实现 前期分析文件得到以下粗略步骤 1 进入二级页面,找到 <ifram ...

  6. Sliverlight/WPF 样式使用方法

    1,UserControl 页面级样式: UserControl.Resources style setter Property value. TargetType为应用的类型 <UserCon ...

  7. win10关闭防火墙和其通知

    Win10电脑在关闭防火墙后,防火墙的通知会不定期提醒,如果误点后,防火墙就悄悄的开启了,导致好多功能就用不了了,所以比较有效的方法是:关闭防火墙,并关闭防火墙通知 1.关闭防火墙 在控制面板中,选择 ...

  8. c#系统预定义类型

  9. linux（3）

    一.用户和组的管理 Linux/Unix是多用户系统: root是超级用户,拥有最高权限.其它用户及权限由root来管理.对比Windows系统: 控制面板 -> 管理工具 -> 计算机管 ...

  10. Android笔记-Activity相关+内存泄漏+Fragment+service

    看了下,上次学习android还是17年的事情,,,,两年过去了我现在终于来搞android了... 官网有一段基础描述: https://developer.android.google.cn/gu ...