html中的div默认是流式显示，每个div会占用一整行

<html>

<head>

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

<title>Insert title here</title>

</head>

<body>

<div>这是第一个显示的div </div>

<div>这是第二个显示的div </div>

<div>这是第三个显示的div </div>

</body>

</html>

显示效果为：

常用的方法有两种方法来改变div的布局情况：

一：采用css   float浮动方法

<html>

<head>

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

<title>Insert title here</title>

</head>

<body>

<style>

   div{float:left;}

</style>

<div>这是第一个显示的div </div>

<div>这是第二个显示的div </div>

<div>这是第三个显示的div </div>

</body>

</html>

显示效果:

二：采用css  display方式来让div并排显示

<html>

<head>

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

<title>Insert title here</title>

</head>

<body>

<style>

   div{float:left;}

</style>

<div>这是第一个显示的div </div>

<div>这是第二个显示的div </div>

<div>这是第三个显示的div </div>

</body>

</html>

显示效果：

三：总结

无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。

html中怎么样让div并排显示的更多相关文章

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

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

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

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

  3. 两个DIV并排显示

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

  4. 让两个Div并排显示

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

  5. 多个div并排显示的居中问题——来自腾讯的一道面试题

    前两天曲面了一下腾讯,被鄙视了... 自己太水了,且面试官对我可能也有点不爽,说什么还没叫我我就去了,可是尼玛写的面试时间是3点40,我特码进去的时候都3点50了,我还以为晚了呢,他妈的. 实现几个d ...

  6. 如何让两个div并排显示

    正常情况下两个div都是上下排版的,那么怎么让它们并排显示呢? 方法一:都左浮动float:left; 方法二:一个左浮动,一个右浮动 方法三:给两个div都设置display:inline属性,但两 ...

  7. html中DIv并排显示问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  8. 两个div并排显示，当浏览器界面缩小时会出现换行

    解决:规定两个子div的父div的宽 <div id="showDataDiv" style="width: 1000px"> <div st ...

  9. html设置多个div并排显示

    我这里以4个div为例,html代码如下: <body> <div id="column1" style="background-color: blue ...

随机推荐

  1. DataFactory+MySQL数据构造

    前言:DataFactory是一种快速生产测试数据的可视化工具,是一种强大的数据生成器,该工具支持DB2.Oracle.Sybase.SQL Server数据库,支持ODBC连接方式,且通过ODBC连 ...

  2. win iso download

    http://rufus.akeo.ie/ window iso download http://win.86tyu.cn/ylmf32win7.html

  3. Django学习---cookie和session

    cookie 客户端浏览器上的一个文件,以键值对的形式存储,如{“user”:“dacehgnzi”} 入门:实现一个简单的登录功能 views.py: user_info = { '}, '}, } ...

  4. Python实践练习：多重剪贴板

    题目 假定你有一个无聊的任务,要填充一个网页或软件中的许多表格,其中包含一些文本字段.剪贴板让你不必一次又一次输入同样的文本,但剪贴板上一次只有一个内容.如果你有几段不同的文本需要拷贝粘贴,就不得不一 ...

  5. 1、linux软件包管理

    linux软件包管理分为两种:RPM包管理和源码包管理,其中RPM包管理又有两种方式:①RPM命令管理,②YUM在线命令管理. RPM包依赖关系: 1.树形依赖 2.环形依赖 (用一条命令同时装来解决 ...

  6. KindEditor 和 xss过滤

    KindEditor   1.进入官网 2.下载 官网下载:http://kindeditor.net/down.php 本地下载:http://files.cnblogs.com/files/wup ...

  7. 引用rtmp编译报错：rtmp.obj : error LNK2001: 无法解析的外部符号 __imp__timeGetTime@0

    如题vs下引用librtmp的时候报错:rtmp.obj : error LNK2001: 无法解析的外部符号 __imp__timeGetTime@0 在link 里加入 winmm.lib 就可以 ...

  8. ROS 禁止公网暴力破解SSH FTP

    最简单的彻底禁止公网访问SSH FTP端口 1 2 /ip firewall filter add chain=input protocol=tcp dst-port=21-22 src-addres ...

  9. flex 设置换行flex-wrap

    flex 设置flex-wrap 换行 本来预想的正常情况下,代码应该如下: ul { width: 100%; display: flex; flex-wrap: wrap; li { ; widt ...

  10. Excel VBA入门（四）流程控制2－循环控制

    所谓循环控制,即在循环执行一段代码,用于完成一些重复性任务. VBA中的循环控制语句主要有3种:for.while.loop.对于大多数人来说,for的使用频率最高,而我个人也觉得for是最为灵活的, ...