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. 威联通212 http 在密码正确的情况下无法登录问题解决

    *现象: 1.putty 可以正常登录 2.smb可以正常登录 3.http 提示密码错误或无效 *解决办法: 1.通过putty   ssh登录到设备 2.执行以下代码 [~] # cp /etc/ ...

  2. vue.js入门语法

    1.入门 <div id="vue_det"> <h1>site : {{site}}</h1> //两个大括号显示参数 <h1>u ...

  3. Google Drive ubuntu

    Google尚未发布用于从Ubuntu访问其drive的官方Linux客户端.然开源社区却业已开发完毕非官方之软件包‘grive-tools’. grive乃是Google Drive(在线存储服务) ...

  4. 基于【 Docker】四 || Docker常用镜像安装

    一.nginx安装 1.拉取镜像:docker pull nginx 2.启动容器:docker run -d -p 80:80 nginx 3.查看nginx:ps aux | grep 'ngin ...

  5. layui下拉多选formSelects使用方法

    下载formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js) 下载地址:https://fly.layui.com/extend/formSel ...

  6. iOS音频频谱动画，仿QQ录音频谱

    先上效果图: display.gif 有需要的请移步GitHub下载: https://github.com/HuangGY1993/GYSpectrum 用法很简单,示例: SpectrumView ...

  7. MySQL读写分离高可用集群及读操作负载均衡（Centos7）

    目录 概述 keepalived和heartbeat对比 一.环境 二.部署 部署lvs代理和keepalived MySQL+heartbeat+drbd的部署 MySQL主从复制 web服务器及a ...

  8. SpringCloud各个组件通俗解析

    https://www.cnblogs.com/lonelyJay/p/9936241.html

  9. Nginx中location模块的详细配置(含示例)

    题记 此前在配置Nginx location模块的时候玩出了一些bug,折腾了一段时间.后来网上也查阅了相关的资料,看着也比较混乱.周末有空想着好好整理一下location模块的配置,结合自己的亲手实 ...

  10. Free lunch is over

    译文:http://www.mamicode.com/info-detail-1324737.html 原文:http://www.gotw.ca/publications/concurrency-d ...