如何让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横向排列的更多相关文章
- 如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- HTML+CSS-如何定义让两个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盒子本身默认样式属性是独占一行,而解决 ...
- 两个div横向排列,顶端对齐的方式。
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- ul li横向排列及圆点处理
如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
- 无序列表li横向排列
一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...
随机推荐
- 当setTimeout遇到闭包
1: function myTest(){ for(var i=0; i< 5; i++){ setTimeout(console.log(i), 0); } } myTest(); 或者比较正 ...
- DDD(Domain Driver Designer) 领域驱动设计简介
领域驱动设计之领域模型 加一个导航,关于如何设计聚合的详细思考,见这篇文章. 2004年Eric Evans 发表Domain-Driven Design –Tackling Complexity i ...
- Oracle 11g XML java连接
在网上找了好多教程 走好好多弯路 现在从头总结下 oralce11g 可以直接用xmltype节点存储xml文件 简单来说就是直接存一个文件进去 首先安装oracle11g 网上教程非常多 然后进Ne ...
- UVALive 5792 Diccionário Portuñol
字符串匹配问题 有n个a串个m个b串,讲a的前缀和b的后缀粘在一起有多少个不同的新串. 首先求不同的前缀和后缀肯定好求了,就用字典树分别存一下a个倒过来的b. 那个问题就是解决例如,abcd,和bcd ...
- Win7下VS2010使用STLPort 和boost1.56.
STLport的下载地址 http://sourceforge.net/projects/stlport/ 下载后,解压出文件.我的目录是 D:\STLport-5.2.1 . 右键计算机,属性,高级 ...
- php简单的爬虫
爬虫的原理是分析下载的页面,找出其中的连接,然后再下载这些链接,对链接再进行更深层次的递归,周而复始.在数据存储方面,先存储到redis里面,再有redis 写入到mysql,这样可以减轻mysql写 ...
- table-cell的手机应用场景
前言 最近在前端观察看见了这篇老文章,看见了元素居中的5种办法,其中提到了display:table-cell这个css显示的新属性,按照当时的浏览器市场来说想必兼容性会是糟糕的一比,但是现在这坛老酒 ...
- 二维指针*(void **)的研究(uC/OS-II案例) 《转载》
uC/OS-II内存管理函数内最难理解的部分就是二维指针,本文以图文并茂的方式对二维指针进行了详细分析与讲解.看完本文,相信对C里面指针的概念又会有进一步的认识. 一.OSMemCreate( ) 函 ...
- 基于htmlparser实现网页内容解析
基于htmlparser实现网页内容解析 网页解析,即程序自动分析网页内容.获取信息,从而进一步处理信息. 网页解析是实现网络爬虫中不可缺少而且十分重要的一环,由于本人经验也很有限,我仅就我们团队开发 ...
- android应用开发之Window,View和WindowManager .
ViewManager vm = a.getWindowManager(); vm.add(view,l); window :一个抽象的窗口基类,控制顶层窗口的外观和行为.作为顶层窗口,可控制窗口背 ...