方法一:

一般情况,默认的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. 对html制作新手的一些建议,大牛可以忽略

    本篇主要讲前端并给制作html页面的新手一些建议,大牛勿喷大牛可以绕过. 感受:我是搞后端开发的,有时拿到一些静态(Html)页面,看到里面的页面结构命名规则极不规范,就有点不好的 感觉了.当然出现这 ...

  2. 关于解决方案和web文件夹放在同一目录路径错误的问题

    今天公司要做个b2b商城,下了个源码,目的是在这个基础上改,可是源码没有解决方案,于是建立了个解决方案,然后添加网站,发现解决方案和web目录位于不同目录(解决方案总是自动生成一个目录),可是我从网上 ...

  3. iOS_SN_CocoaPods使用详细说明( 转)

    一.概要 iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三方库. 二.安装 由于 ...

  4. [转]Xcode的重构功能

    Xcode提供了以下几个重构功能: Rename Extract Create Superclass Move Up Move Down Encapsulate 在菜单栏中的位置如下图: 在代码区里直 ...

  5. jq不识别拼接的对象id的解决方案

    今天在做项目时,遇到了这么个问题. 先声明一下,我的id都是动态变换的.从1-10呢. <div id="a1"></div> <div id=&qu ...

  6. Android再学习-20141022-Activity的生命周期

    20141022-Android再学习 如何在一个应用程序当中定义多个Activity 定义一个类,继承Activity 在该类当中,复写Activity当中的onCreate方法.onCreate( ...

  7. ARM 汇编器对C的扩展

    __swi void ledtest();    //:声明 edtest 是个软中断. __asm  内嵌汇编          //:通常在C程序里面需要嵌入汇编代码,这是就可以用__asm关键字 ...

  8. C C++ OC iOS面试重点问题(一)

    C C++ OC iOS面试重点问题(一) 1.字符串常量需要加\0 2.逻辑运算 位操作(经典:实现两个数的交换) 3.关键字 4.引用和指针的区别和联系 5.如何引用一个已经定义过的全局变量?  ...

  9. Eclipse远程调试weblogic

    http://www.cnblogs.com/dyllove98/archive/2013/08/06/3241140.html http://blog.csdn.net/afgasdg/articl ...

  10. 硬盘安装windows7

    微软已经发表声明 Windows XP 操作系统将于2014年4月8日停止提供补丁和安全更新,提醒用户尽快升级现有的XP操作系统.Windows XP曾在2001年10月25日正式发布的,已经走过了十 ...