如何让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中 ...
随机推荐
- (一)一个工作任务引起的乱战——c#中结构体与byte[]间相互转换
一个工作任务涉及到c#与c++系统间的udp通信,处理了蛮长时间没有完成任务,但是期间接触到不少小知识点.本人是初接触c#,c++语言没有接触过.可能写的东西都很小儿科,暂且记录下来当工作日记把. 先 ...
- acm poj1260 dp
题目大意: 买珍珠,每买一种珍珠需要额外付出十个这种珍珠的钱,但你可以买比这种珍珠高品质的珍珠来替换它(那么就只需要那高品质付出那额外的十个珍珠的钱了,但是每个珍珠的价钱也变化了) 这是一个dp. 令 ...
- C# 读取EXCEL数据
/// <summary> /// 读取EXCEL数据 /// </summary> /// <param name="Path">< ...
- 《HTML5经典坦克大战》游戏(代码)
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
- MapDB:专为Java设计的高性能的数据库
MapDB是一个快速.易用的嵌入式Java数据库引擎,它提供了基于磁盘或者堆外(off-heap允许Java直接操作内存空间, 类似于C的malloc和free)存储的并发的Maps.Sets.Que ...
- (转)CentOS 日志分析
1.了解日志文件 linux的日志文件可以说是最有用的了,日志文件可以让我们了解系统所处的状态,比如能查出哪些用户有登入,这也涉及相关的安全问题.如果我们不懂得分析日志,可能我们都不知道有些用 ...
- Codeforces 509C Sums of Digits
http://codeforces.com/contest/509/problem/C 题目大意: 给出一个序列,代表原序列对应位置数的每一位的数字之和,原序列单调递增,问原序列的最后一个数最小的方 ...
- Qt编程之实现属性窗口编辑器
类似于这种: 就是右下角这个框,有属性名字和对应的value编辑. 这个Widget是作为一个QDockWidget被添加到QMainWindow中的.QMainWindow必须要有centralWi ...
- Android ToggleButton使用介绍
ToggleButton,就是开关按钮,包括选中和未选中状态,并且需要为不同的状态设置不同的事件处理: 例如:使用图片来展示ToggleButton不同的状态: MainActivity.java p ...
- centos Minicom通信终端
minicom是linux下的串口通信软件,他使用完全使用键盘操作.它虽然没有windows下的超级终端好用,但是它也是一种串口通信的方法.一.minicom安装在超级终端中输入:sally@sall ...