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. （十）Activitivi5之启动流程/完成任务的时候设置流程变量

    一.启动流程的时候设置流程变量 1.1 案例 /** * 启动流程实例 */ @Test public void start() { Student student=new Student(); st ...

  2. Windows 下 mysql 5.7 设置 区分大小写(敏感),设置默认编码 utf8mb4

    修改编码 c盘下搜索 C:\ProgramData\MySQL\MySQL Server 5.7 在该my.ini文件下进行配置修改 [client] default-character-set = ...

  3. sql语句分页多种方式

    sql语句分页多种方式ROW_NUMBER()OVER sql语句分页多种方式ROW_NUMBER()OVER 2009年12月04日 星期五 14:36 方式一 select top @pageSi ...

  4. Android中ListView的使用

    1.主要概念 ListView用于将大数据集以列表的形式展示. ListView可以看成一个容器,它有如下继承链: View <- ViewGroup <- AdapterView < ...

  5. 数组的新API

    话不多数,直接上代码: 第一个输出1,2,3,4,5 在函数体中第一个console依次输出1,2,3,4,5 然后再将里面的内容逐个+1,所以第二个输出值为:2,3,4,5,6 但是这都不会改变原数 ...

  6. 如何使 JavaScript 更高效？

    传统的 Web 页面不会包含很多脚本,至少不会太影响 Web 页面的性能.然而,Web 页面变得越来越像应用程序,脚本对其的影响也越来越大.随着越来越多的应用采用 Web 技术开发,脚本性能的提升就变 ...

  7. 12种不宜使用的Javascript语法

    Douglas Crockford列出了12种应该避免使用的Javascript语法,我觉得非常值得推广. ============================== 1. == Javascrip ...

  8. 7.生产者消费者 案例 （使用Lock 同步锁 方式，使用Condition完成线程之间的通信）

    /* * 生产者消费者 案例 (使用Lock 同步锁 方式,使用Condition完成线程之间的通信) * */ public class TestProductorAndConsumerForLoc ...

  9. Mysql中的锁机制-转载

    原文:http://blog.csdn.net/soonfly/article/details/70238902 锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的 计算资源(如 ...

  10. MySQL数据库的二进制安装、源码编译和基础入门操作

    一.MySQL安装 (1)安装方式: 1 .程序包yum安装 优点:安装快,简单 缺点:定死了各个文件的地方,需要修改里边的相关配置文件,很麻烦 2 .二进制格式的程序包:展开至特定路径,并经过简单配 ...