HTML+CSS-如何定义让两个div横向排列
方法一:
一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢?
div默认的display属性是block。所以每一个div都是新的一行,现在把display换成inline就不会换新行了。
<div style="background-color:#ff0000;display:inline;">aaa</div>
<div style="background-color:#ffff00;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; 高度一致,文字垂直居中。
HTML+CSS-如何定义让两个div横向排列的更多相关文章
- 如何定义让两个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 style="width:50%;hight:100%;float:left:"><for ...
- css实现内容不相同的左右两个div等高
问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...
- html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
随机推荐
- arm Linux 驱动LED子系统 测试
Linux内核在3.0以上引入了设备树概念(具体哪个版本不清楚)在编译内核后需要将与之对应的dtb文件也下载人板子上才能使内核与硬件关联起来. dtb文件是有dts文件编译后生成的:例如 /* * C ...
- Host aggregate分区
问题描述:生产区一期环境增加4台计算结点,希望被大数据租户独占1. 该大数据用户创建的虚拟机必须被调度到这4个计算结点2. 其他租户创建虚拟机禁止调度到这4台机器 标黄的需要自行根据情况修改解决方案: ...
- Hibernate 条件-分页查询
这里我们继续跟着上一次的节奏继续学习Hibernate的查询. 1.条件查询一(占位符) 按照占位符的方式进行条件查询,这里query有一个setInteger(arg1, arg2)方法,其中第一个 ...
- 「UOJ207」共价大爷游长沙
「UOJ207」共价大爷游长沙 解题思路 : 快速判断两个集合是否完全相等可以随机点权 \(\text{xor}\) 的思路可以用到这道题上面,给每一条路径随机一个点权,维护出经过每一条边的点权的 \ ...
- 51nod1031 骨牌覆盖 组合数学
不难发现,只有$1 * 2, 2 * 2$两种方法 因此,设$f[i]$表示填满$1 - i$的方案数 那么有$f[i] = f[i - 1] + f[i - 2]$,其实就是斐波那契数列.... 复 ...
- [JSOI2007]文本生成器 --- AC自动机 + DP
[JSOI2007]文本生成器 题目描述: JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版. 该软件可以随机 ...
- BNU校赛总决赛J 小白兔小灰兔 相交计算几何模板
J 小白兔小灰兔 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K Special Judge, 64bit IO Format: %lld 题目描述 ...
- WNDR4300v2 固件编译
WNDR4300v2 固件编译 1.从官网下载源码 从官网找到 https://kb.netgear.com/2649/NETGEAR-Open-Source-Code-for-Programme ...
- 37.递推:Pell数列
总时间限制: 3000ms 内存限制: 65536kB 描述 Pell数列a1, a2, a3, ...的定义是这样的,a1 = 1, a2 = 2, ... , an = 2 * an − 1 + ...
- hdu 5206 Four Inages Strategy 判断是否是正方形
Four Inages Strategy Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem. ...