div是块级元素，是独占一行的一般情况下，两个相邻的div是不会处于同一行的。
例如：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaa</title>
<link rel="stylesheet" type="text/css" href="../css/0001.css">
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4">a</div>
<div style="height: 40px;width: 80px;background-color: #f5f5f5">b</div>
<div style="height: 40px;width: 80px;background-color: #b2b2b2">c</div>
</body>
</html>
让div在同一行有两种方法：
第一种是在div里加float: left;
如
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaa</title>
<link rel="stylesheet" type="text/css" href="../css/0001.css">
<style>
div {
float: left;
}
</style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4">a</div>
<div style="height: 40px;width: 80px;background-color: #f5f5f5">b</div>
<div style="height: 40px;width: 80px;background-color: #b2b2b2">c</div>
</body>
</html>
第二种方法是加display: inline-block;
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaa</title>
<link rel="stylesheet" type="text/css" href="../css/0001.css">
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4">a</div>
<div style="height: 40px;width: 80px;background-color: #f5f5f5">b</div>
<div style="height: 40px;width: 80px;background-color: #b2b2b2">c</div>
</body>
</html>
相关推荐
实现多个div在同一行显示的应用还是比较广泛的，于是做了个示例，初学者可以参考下，希望对大家有所帮助
一种5个DIV并排在一行的方法</title> <style type=”text/css”> #bottom { margin:0 auto;/*下边居是0 */ width:300px; } #bottom div { width:60px; } #d1 { float:left; background:#f00; } #d2...
<div class=charts1/> <div class=charts2/> <div class=charts3/> <div class=charts4/> <div class=charts5/> <div class=charts6/> <div class=charts7/> 数据处理就不用提了。嗯，直接画图： // 画 折线...
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下： jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class <!DOCTYPE html> <html> <...
网站的结构如何 BYTE4U-IT解决方案 概括 你会学什么 什么是HTML？...在每个文件夹中，您将拥有同一程序的多个版本。 现在开始 1-什么是HTML（ ） 2-元素（ ） 3-属性（ ） 4-缩进（ ） 5- Div（ ）
5.4.2 链接到同一页面的书签 91 5.4.3 链接到不同页面的书签 92 5.5 外部链接 93 5.5.1 通过HTTP协议 94 5.5.2 通过FTP 94 5.5.3 发送E-mail 95 5.5.4 下载文件 96 5.6 其他链接 98 5.6.1 脚本...
消息採用div+float布局，每条消息用一个DIV标签包裹，里面再放两个DIV分别用来包裹用户图标和用户消息内容。左側消息，先清除浮动，然后设置 float：left。这样用户图标和消息内容就能够显示在同一行了，当中用户...
（例如，对于第二张图片，例如profile2 ） 然后创建一个div并将infoN hide在该类中。 （与图片相同，如果是第二个配置文件，则info2 hide像这样info2 hide ） 然后，在每个h5 p标签上输入名称和描述。 最后，放置hr...
数据结构为数组中包含对象–树形结构，用Vue组件的... <div id=table-component-div> <table v-for=item v-bind:list=item></table> </div> 组件模板代码 <script type=text/x-template id=table-component-tem
兼容IE6+及现代浏览器的简单分页，支持同一页面多个分页。 使用 Browser <link rel=stylesheet href=css/GB-paging.css> [removed][removed] 普通分页 HTML <div id=gbpaging class=gb-paging> JS ...
第N格 Nth Grid是一个易于使用但功能强大的基于Flexbox的Sass网格混合框架。 Nth Grid允许您仅使用2个简单易用的mixins来创建水平和垂直网格布局。 您可以自由使用自己的标记，并且没有负边距， .last类...div class=
它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。所以，基本上你只需要链接这个插件文件后，设置好内容，然后样式化CSS就可以了。... 首先是html标记 代码如下: <div id=”slider”> <ul> <li>conte
当然，在GWT中也可以有多个HTML页面，但是如果要以纯GWT方式进行操作，则可以使用一种方法从Java代码内部交换页面上的内容。 在此GWT-Example-Project中，我在java方法中使用了switch-case语句，以根据用户状态更改...
标签可以动态地添加或删除多个面板，你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板，每个面板都有标题、图表和关闭按钮。当标签被选中之后，会显示相应面板的内容。 使用HTML标记创建...
Html静态版新增强大的后台管理员权限分配管理功能，后台的所有管理功能均可以通过权限管理进行设置，对于网店多个管理员的情况下非常适且，所有管理员之间均可以设置独立不同的管理权限，安全性更高! 四一、支持...