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 ...
随机推荐
- 主流PHP框架性能评测 (引用)
主要涉及到的框架有 CodeIgniter 老品牌易用性框架yaf 鸟哥用c写的php扩展,高性能框架yii 自动生成代码(gii)laravel 号称最优雅的框架swoole framework 支 ...
- ref:【干货分享】PHP漏洞挖掘——进阶篇
ref:http://blog.nsfocus.net/php-vulnerability-mining/ [干货分享]PHP漏洞挖掘——进阶篇 王陶然 从常见的PHP风险点告诉你如何进行PH ...
- 浅谈三款常用软件 - Chrome、Intellij IDEA、Cygwin
作为一个每天的接触计算机的程序员,肯定也会接触形形色色的软件,不过今天在此介绍的三款软件,则是我每天都要用到的,而且我认为它们非常好用,极大的提高了我的开发效率. 1.Chrome Google的大名 ...
- Python - 软件设计规范
为什么要设计好目录结构? "设计项目目录结构",就和"代码编码风格"一样,属于个人风格问题.对于这种风格上的规范,一直都存在两种态度: 一类同学认为,这种个人风 ...
- React Native踩坑之启动android模拟器失败
报错 Could not install the app on the device, read the error above for details.Make sure you have an A ...
- 【BZOJ 2024】 2024: [SHOI2009] 舞会 (容斥原理+高精度)
2024: [SHOI2009] 舞会 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 368 Solved: 102 Description OIto ...
- Mac 配置几个环境变量
终端 open -t ~/.bash_profile 打开.bash_profile export PATH=${PATH}:/Users/maxinliang/Android/sdk/pla ...
- Java并发(七):双重检验锁定DCL
双重检查锁定(Double Check Lock,DCL) 1.懒汉式单例模式,无法保证线程安全: public class Singleton { private static Singleton ...
- Unity UGUI之Text
下图是Text组件的内容. Character(字符) Text--输入要显示的文本 Font--要渲染文本的字体类型(例如:黑体.宋体) FontStyle--是否要加粗,倾斜等. Normal-- ...
- 《C# to IL》第二章 IL基础
如果你真的想要理解C#代码,那么最好的方法就是通过理解由C#编译器生成的代码.本章和下面两章将关注于此. 我们将用一个短小的C#程序来揭开IL的神秘面纱,并解释由编译器生成的IL代码.这样,我们就可以 ...