方法一:

一般情况,默认的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. 【算法与数据结构实战】线性表操作-实现A并B,结果放入A中

    //数据结构与算法基础题1:线性表操作,实现A并B,结果放入A中 #include "stdafx.h" #include <iostream> #include &l ...

  2. esxi上引起vm绑定浮动IP无法和外面通信

    在vmware esxi环境通过创建VM安装完成openstack之后,发现创建Instance后网络不通,经过多方面排查,最后确定是vmware esxi标准交换机拒绝“混杂模式”所致,故打开“混杂 ...

  3. 【BZOJ 3534】 3534: [Sdoi2014]重建 (Matrix-Tree Theorem)

    3534: [Sdoi2014]重建 Time Limit: 10 Sec  Memory Limit: 512 MBSec  Special JudgeSubmit: 709  Solved: 32 ...

  4. [BZOJ4869][六省联考2017]相逢是问候(线段树+扩展欧拉定理)

    4869: [Shoi2017]相逢是问候 Time Limit: 40 Sec  Memory Limit: 512 MBSubmit: 1313  Solved: 471[Submit][Stat ...

  5. 【刷水-二分答案】BZOJ1650 & BZOJ1639

    BZOJ1650-[Usaco2006 Dec]River Hopscotch 跳石子 [题目大意] 数轴上有n个石子,第i个石头的坐标为Di,现在要从0跳到L,每次条都从一个石子跳到相邻的下一个石子 ...

  6. redisson实现基于业务的互斥锁

    虽然数据库有锁的实现,但是有时候对于数据的操作更需要业务层控制. 这个解决的问题有次面试被问到过,当时不知道怎么解决,乱说一通,今天也算是有个解决方案了 项目中有个需求,就是订单需要经过一层一层的审核 ...

  7. 树形DP+(分组背包||二叉树,一般树,森林之间的转换)codevs 1378 选课

    codevs 1378 选课 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond  题目描述 Description 学校实行学分制.每门的必修课都有固定的学分 ...

  8. Codeforces Round #299 (Div. 2) B. Tavas and SaDDas 水题

    B. Tavas and SaDDas Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/535/p ...

  9. Codeforces Round #303 (Div. 2) B. Equidistant String 水题

    B. Equidistant String Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/54 ...

  10. java - 内存泄漏

    内存泄漏问题产生原因 长生命周期的对象持有短生命周期对象的引用就很可能发生内存泄露,尽管短生命周期对象已经不再需要,但是因为长生命周期对象持有它的引用而导致不能被回收,这就是java中内存泄露的发生场 ...