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. CAS 5.x搭建常见问题系列(3).Failure to find org.apereo.cas:cas-server-support-pm-jdbc:jar:5.1.9

    错误内容 cas overlay的pom.xml增加了cas-server-support-pm-jdbc.jary依赖后, 打包(mvn package)出现如下的报错 D:\casoverlay\ ...

  2. (六)lucene之其他查询方式(组合查询,制定数字范围、指定字符串开头)

    本章使用的是lucene5.3.0 指定数字范围查询 package com.shyroke.test; import java.io.IOException; import java.nio.fil ...

  3. cli create ssl certkey

    cli create ssl certkey ############################### # 创建CA密钥 create ssl rsakey bwsrv-root.key -ex ...

  4. php 判断是是否是命令行模式

    /* 判断当前的运行环境是否是cli模式  是:true 不是:false */ function is_cli(){    return preg_match("/cli/i", ...

  5. (详细)JAVA使用JDBC连接MySQL数据库(2)- MySQL Connectors

    欢迎任何形式的转载,但请务必注明出处. 本节内容 mysql connectors介绍 下载安装 在java中配置 点击进入官网下载 一.mysql connectors介绍 mysql connec ...

  6. CVE-2018-2879 - anniversary

    For the anniversary of the discovery of CVE-2018-2879 by Sec Consult (https://sec-consult.com/en/blo ...

  7. List · leetcode-24. 交换相邻节点

    题面 Given a linked list, swap every two adjacent nodes and return its head. You may not modify the va ...

  8. TreeMap源码实现类中文全解析

    /** * 基于红黑树(Red-Black tree)的 NavigableMap 实现.该映射根据其键的自然顺序进行排序, * 或者根据创建映射时提供的Comparator 进行排序,具体取决于使用 ...

  9. 【Distributed】分布式系统中遇到的问题

    一.概述  大型互联网公司公司一般都采用服务器集群,这样就要实现多个服务器之间的通讯,在nginx实现负载均衡(分布式解决方案)服务器集群会产生那些问题? 分布式锁(基本)单纯的Lock锁或者syn ...

  10. 用pythoninstall cefpython打包exe,制作自己的浏览器

    cefpython浏览器 介绍 用pythoninstall cefpython打包exe,制作自己的浏览器, 软件架构 PyInstaller: 3.4 Python: 3.5.4 Platform ...