方法一:

一般情况,默认的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横向排列的更多相关文章

  1. 如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  2. 两个div横向排列,顶端对齐的方式。

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...

  3. 如何让div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  4. div横向排列

    在网页布局中,常常有几个div横向排列的需求,此时,可以采用浮动的方式: 1.左右浮动: <div class="main"> <div class=" ...

  5. DIV横向排列_CSS如何让多个div盒子并排同行显示

    如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

  6. css定位!如何将两个表格并排排列!

    直接创建两个div,之后设置每个占页面的一般,设置左对齐即可.<div style="width:50%;hight:100%;float:left:"><for ...

  7. css实现内容不相同的左右两个div等高

    问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...

  8. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  9. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

随机推荐

  1. 转:深入剖析 JavaScriptCore

    ref:https://ming1016.github.io/2018/04/21/deeply-analyse-javascriptcore/ 深入剖析 JavaScriptCore

  2. BZOJ2434 NOI2011阿狸的打字机

    询问x这个串在y中出现的次数. fail数组有一个性质就是一旦a的fail指向b那么b所代表的字串一定是a的后缀. 所以我们看fail树(即按fail反向建树)中x的子树有多少y的结点即可. 这个操作 ...

  3. Java解释执行和编译执行

    以前有句话说:“Java是解释执行的 ” .现在看来确实不是很准确,至于原因,在此简略解释: 首先,我们先解释一下在Java中解释执行和编译执行的区别. 解释执行:将编译好的字节码一行一行地翻译为机器 ...

  4. [转]Android 中fill_parent与wrap_content的区别

        在Android中,对于组件的属性“layout_width”和“layout_height”, 其值总是设置为“wrap_content”或“fill_parent”. 那么,这两个值有什么 ...

  5. 使用 dsc_extractor 导出 dyld_shared_cache_arm64

    iOS系统的全部Framework二进制被打包成一个cache文件,位于 /System/Library/Caches/com.apple.dyld 目录下,我们要想查看某个系统库的二进制需要将 dy ...

  6. HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  7. The useful App Paths registry key : HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths how to load BPLs without writ ...

  8. BeanPostProcessor使用心得

    最近想对项目中的所有bean进行一个代理.然后监控bean得方法的使用情况.         刚开始想的方法是:重写项目的beanFactory,然后再getBean的使用,对结果object进行一个 ...

  9. Spring通过Gmail SMTP服务器MailSender发送电子邮件

    Spring提供了一个有用的“org.springframework.mail.javamail.JavaMailSenderImpl”类,通过JavaMail API 简化邮件发送过程.这里有一个项 ...

  10. 【转】2012年6月25 – 某欧美上市企业PHP工程师最新面试题

    笔试: 尼玛,连页眉页脚都是英文!不过都还能读懂.题目很简单.印象深刻的有几题. 具体题目忘了,主要知识点考点是,建立的视图,实现有自增字段. 答:之前还真没考虑过这个问题.当时条件发射,给了一个用户 ...