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>
相关推荐
发生异常时,异常周围信息(抛出对象本身类型)-------------异常处理程序<BR><BR>12.5一个异常处理的简单实例:除数为0<BR><BR>需求:使用一个小应用程序,完成两数相除的计算<BR><BR><BR><BR><BR><BR><BR><BR><BR>...
以下为css样式: ...–width指定每个div占据的宽度–></pre>.custom_div{height: 23px;width: 50px;line-height: 23px;float: left;} <pre></pre> 以下为html代码:[code]<pre name=”code” class=”html”
该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。 2.style标签方式:(内嵌方式) 在head标签中加入style标签,对多个标签进行统一修改。 <head> <style type=”text/css”> p { color...
数据结构为数组中包含对象–树形结构,用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
<div class=charts1/> <div class=charts2/> <div class=charts3/> <div class=charts4/> <div class=charts5/> <div class=charts6/> <div class=charts7/> 数据处理就不用提了。嗯,直接画图: // 画 折线...
对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法: $("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2)[removed]; //调用dom的方法...
一种5个DIV并排在一行的方法</title> <style type=”text/css”> #bottom { margin:0 auto;/*下边居是0 */ width:300px; } #bottom div { width:60px; } #d1 { float:left; background:#f00; } #d2...
它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制。所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了。... 首先是html标记 代码如下: <div id=”slider”> <ul> <li>conte
if request("keyword")<>"" and request("select")<>"" then sql="select * from biao where "&request("select")&" like '%"&request("keyword")&"%'" elseif request("keyword")<>"" and request("select")="all...
document.write('<a href="/zt/book/" target="_blank"><img src="/images/300x90-02.jpg" width="300" height="90" /></a>');} if (code=="in300x250"){ document.write('<script type="text/javascript" >BAIDU_...
<div><{KT}></div><{/KT}>。 4)如果不清楚需要调用的数据的变量名,请用<{print_r($item)}>打印出KT输出的变量数组,查看需要调用数据的变量名,用法如下: <{KT name="推荐位名称" city_id=$request.city_id limit...
消息採用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。左側消息,先清除浮动,然后设置 float:left。这样用户图标和消息内容就能够显示在同一行了,当中用户...
标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后,会显示相应面板的内容。 使用HTML标记创建...
组件调用灵活:在同一页面可以调用任意多个弹出窗口,而且最突出的是在同一页面可以弹出不带遮罩和带遮罩的窗口混用。 支持所有主流浏览器:IE6+,Firefox2.0+,Chrome(谷歌浏览器),Opera9.5+,Safari3.0+等。(题...
Html静态版新增强大的后台管理员权限分配管理功能,后台的所有管理功能均可以通过权限管理进行设置,对于网店多个管理员的情况下非常适且,所有管理员之间均可以设置独立不同的管理权限,安全性更高! 四一、支持...
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 脚本...
另外在鲜少机会下,有可能同一标头名称拥有不同的值,此时必须改为使用headerValues 来取得 这些值。 3)initParam initParam取得设定web站点的环境参数(Context) 例:一般的方法String userid = (String)...
兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页。 使用 Browser <link rel=stylesheet href=css/GB-paging.css> [removed][removed] 普通分页 HTML <div id=gbpaging class=gb-paging> JS ...
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class <!DOCTYPE html> <html> <...