html中怎么样让div并排显示
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并排显示的更多相关文章
- （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- 在HTML中实现两个div并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
- 两个DIV并排显示
今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...
- 让两个Div并排显示
一.使用display的inline属性 <div style="width:300px; height:auto; float:left; display:inline"& ...
- 多个div并排显示的居中问题——来自腾讯的一道面试题
前两天曲面了一下腾讯,被鄙视了... 自己太水了,且面试官对我可能也有点不爽,说什么还没叫我我就去了,可是尼玛写的面试时间是3点40,我特码进去的时候都3点50了,我还以为晚了呢,他妈的. 实现几个d ...
- 如何让两个div并排显示
正常情况下两个div都是上下排版的,那么怎么让它们并排显示呢? 方法一:都左浮动float:left; 方法二:一个左浮动,一个右浮动 方法三:给两个div都设置display:inline属性,但两 ...
- html中DIv并排显示问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- 两个div并排显示，当浏览器界面缩小时会出现换行
解决:规定两个子div的父div的宽 <div id="showDataDiv" style="width: 1000px"> <div st ...
- html设置多个div并排显示
我这里以4个div为例,html代码如下: <body> <div id="column1" style="background-color: blue ...
随机推荐
- 转载 cglib代理和java代理
Java动态代理之JDK实现和CGlib实现(简单易懂) 转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6542259.html 一:代理模式(静态代理) ...
- LinearLayout布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- selenium安装方式
selenium的二种安装方式 1.在线安装:打开cmd输入, pip.ext install selenium 2.离线安装,下载selenium安装包,然后解压,在cmd中进入到解压的文件中,在运 ...
- 如何debug？(转载)
本文属于转载,原文地址如下: https://blog.csdn.net/zhao4zhong1/article/details/53078924 一.码畜:靠编译器帮自己查语法错误 消灭笔误:编写适 ...
- Navicat修改查询保存路径
mysql使用navicat查询时有时候会有很多sql语句, ctrl+s时自动保存在C:\Users\Administrator\Documents\Navicat\MySQL\servers\lo ...
- ubuntu下搭建android开发环境之超顺畅模拟器
如果说android系统的卡,像耳边蚊子让人抓狂,那么android模拟器的卡,那就像午睡时的苍蝇.大概就是一样的恶心~~ 那么,这样的问题对于开发者肯定忍无可忍,我也一样,虽然我还没有入门,但我也一 ...
- java synchronized详解[转]
Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...
- code1074 食物链
开3*n的并查集,其中x用来连接与x同类的,x+n用来连接x吃的,x+2*n用来连接x被吃的. 1 x y时,如果 x吃y 或 x被y吃,那么为假话, 否则x与y同类,x吃的y也吃,x被吃的y也被吃: ...
- 1710 生日蛋糕（1999 noi）
1710 生日蛋糕(1999 noi) 1999年NOI全国竞赛 题目描述 Description 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体 ...
- Spring.net init-method destroy-method
<object id="exampleInitObject" type="Examples.ExampleObject" init-method=&quo ...