如何定义让两个div横向排列
方法一:
一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢?
div默认的display属性是block。所以每一个div都是新的一行,现在把display换成inline就不会换新行了。
<div style="display:inline;">aaa</div>
<div style="display:inline;">bbb</div>
方法二:
这里使用float:right属性。float做为CSS中的一个属性定义元素向哪个方向浮动。
float:right 文本或图像会移至父元素中的右侧。
注意有写情况float属性必须配合width使用,否则失效。
<td class="bg10">
<div style="width:120px; float:right;">阅读次数:9999</div>
<div style="width:200px; float:right;">发表日期:2009-09-10</div>
</td>
.bg10 {
background-image:url(../images/news_r6_c4.jpg);
height:24px;
line-height:24px;
color:#939393;
}
height:24px; 和 line-height:24px; 高度一致,文字垂直居中。
如何定义让两个div横向排列的更多相关文章
- HTML+CSS-如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- 两个div横向排列,顶端对齐的方式。
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...
- 如何让div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- div横向排列
在网页布局中,常常有几个div横向排列的需求,此时,可以采用浮动的方式: 1.左右浮动: <div class="main"> <div class=" ...
- DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...
- css实现内容不相同的左右两个div等高
问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
随机推荐
- 5 - SQL Server 2008 之 四则运算、比较运算、逻辑运算及字符连接运算
四则运算如下: --加减乘除(+.-.*.\.%)取余运算 SELECT --加法运算 AS 加法结果2, --减法运算 -2.5 AS 减法结果1, 15.5+5.5 AS 减法结果2, --乘法运 ...
- n进制转为十进制
主程序代码 - #include <stdio.h> #include <string.h> main() { long t1; int i, n, t, t3; ]; pri ...
- 【转】纯 CSS 实现高度与宽度成比例的效果
先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...
- C# - Sql数据类型的对应关系
<Language From="SQL" To="C#"> <Type From="bigint" To="lo ...
- StarUML启动报RPC服务器不可用错误
有很多人说启动 Remote Procedure Call (RPC) 服务即可,还是我试过了没有起作用,后来网友说,启动Print Spooler就可以了,暂时解决了问题.
- 用sed、awk、grep同时匹配多个条件(与模式、或模式)
同时匹配ABC 和 123:sed -n '/ABC/{/123/p}' awk '/ABC/&&/123/{ print $0 }' grep -E '(ABC.*123|123.* ...
- 绘图quartz之加水印
实现在图片上加一个水印 并存在document的路径下 同时在手机相册中也存一份 //首先开启imageContext找到图片 UIGraphicsBeginImageContext( ...
- iOS CGContextRef 画图小结
CGContextRef context = UIGraphicsGetCurrentContext(); //设置上下文 //画一条线 CGContextSetStrokeColorWithColo ...
- 12XML(可扩展标记语言)
XML:eXtensible Markup Language 什么是标记语言?什么是标记? 标记(Markup):文档中任何不想被打印输出的部分(不是真正的文档内容,联想读书时做的“读书笔记”,在旁边 ...
- Base64的用法
如果要对一些图片进行保存,把他的文件名变成乱码,不让用户把他删掉,可以用Base64把他删掉用法如下: //获取访问图片的路径 String path=editText.getText().toStr ...