方法一:

一般情况,默认的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横向排列的更多相关文章

  1. 如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  2. HTML+CSS-如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  3. div横向排列

    在网页布局中,常常有几个div横向排列的需求,此时,可以采用浮动的方式: 1.左右浮动: <div class="main"> <div class=" ...

  4. DIV横向排列_CSS如何让多个div盒子并排同行显示

    如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

  5. 两个div横向排列,顶端对齐的方式。

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...

  6. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

  7. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  8. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  9. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

随机推荐

  1. JAVA泛型解释

    理解Java泛型最简单的方法是把它看成一种便捷语法,能节省你某些Java类型转换(casting)上的操作: 1 List<Apple> box = ...; 2 Apple apple ...

  2. Swift--基础(一)基本类型 符号 字符串(不熟的地方)

    常量 变量 let age = 20 常量不可变 var num = 24 变量可变 let count:Int = 2 定义类型 Double(count)  类型转换 符号 1.?? let de ...

  3. Cookie[1]

    1.什么是Cookie Cookie是一小段文本类型的数据,由服务器发送,并保留在客户端的计算机上. 2.Cookie的作用 服务器可以利用Cookie包含的信息来筛选并经常维护这些信息,以判断在Ht ...

  4. java线层的使用

    class Do3 { public static void main(String[] args) { XC d1=new XC("小王"); XC d2=new XC(&quo ...

  5. poj2932 Coneology (扫描线)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Coneology Time Limit: 5000MS   Memory Lim ...

  6. CentOS 5.5安装图解教程

    说明:实际生产环境中,CentOS 5.5这个版本相当稳定,而且硬件兼容性也很好,是很多服务器装机者的首选系统,下面介绍CentOS 5.5的具体安装过程   说明:实际生产环境中,CentOS 5. ...

  7. 在git bush中如何退出vim编辑器

    写npm的pakege.json文件的files配置时,如果有不想包含的文件,那就要创建.npmignore文件排除,但windows系统又不允许创建以点开头命名的文件,咋办? 这时候就要用到linu ...

  8. 《HTML5经典坦克大战》游戏(代码)

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  9. Python学习笔记总结(二)函数和模块

    一.函数 函数的作用:可以计算出一个返回值,最大化代码重用,最小化代码冗余,流程的分解. 1.函数相关的语句和表达式 语句        例子 Calls        myfunc(‘diege', ...

  10. iOS开发 自定义navigationleftItem 之后手势失效的问题

    @property (nonatomic, strong) UIViewController *currentShowVC; //设置代理 self.navigationController.inte ...