方法一:

一般情况,默认的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. MySQL常用知识

    1.MySQL常用引擎有哪些? A:MySQL常用的引擎有InnoDB.MyISAM.Memory,默认时InnoDB InnoDB:磁盘表,支持事务,支持行级锁,B+Tree索引 优点:具有良好的A ...

  2. EOJ 3246 实验室传染病

    线段树,暴力. 先处理出每个点直接能感染到的最左边的和最右边的. 之后每次扩展,看向左能到达的那些点中,最左以及最右能到哪些点,更新. 看向右能到达的那些点中,最左以及最右能到哪些点,更新. 最左最右 ...

  3. Python导入模块-Import

    #1语法importimport module1,module2,module3,module4 #2from xx import xx 语句from module import name1,name ...

  4. Mybatis源码分析之Mapper文件解析

    感觉CSDN对markdown的支持不够友好,总是伴随各种问题,很恼火! xxMapper.xml的解析主要由XMLMapperBuilder类完成,parse方法来完成解析: public void ...

  5. 洛谷——P2071 座位安排 seat.cpp/c/pas

    P2071 座位安排 seat.cpp/c/pas 题目背景 公元二零一四年四月十七日,小明参加了省赛,在一路上,他遇到了许多问题,请你帮他解决. 题目描述 已知车上有N排座位,有N*2个人参加省赛, ...

  6. JSP中动态INCLUDE与静态INCLUDE的区别?

    动态INCLUDE用jsp:include动作实现 它总是会检查所含文件中的变化,适合用于包含动态页面,并且可以带参数 静态INCLUDE用include伪码实现,定不会检查所含文件的变化,适用于包含 ...

  7. 执行Shell脚本的4种方法及区别介绍(转)

    原文地址: http://www.jb51.net/article/66824.htm 执行shell脚本有以下几种方式 ###1.相对路径方式,需先cd到脚本路径下 [root@banking tm ...

  8. HDU 1272(并查集)

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  9. android studio 可以汉化的 文件 地方

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 汉化包 百度云盘 下载地址:https://pan.baidu.com/s/1pLjwy ...

  10. CSS 笔记——阴影、圆角、旋转、光标

    7. 阴影.圆角.旋转.光标 (1)box-shadow 阴影 基本语法 text-shadow: h-shadow v-shadow blur color; box-shadow: h-shadow ...