鲨鱼网
实现让两个DIV横向排列方法揭秘
创始人
2024-07-13 18:21:22
0次

你对如何定义让两个DIV横向排列的方法是否熟悉，这里和大家分享一下，主要有两种方法，一种是把display换成inline，另一种就是使用float:right属性，相信本文介绍一定会让你有所收获的。

如何定义让两个DIV横向排列

两个DIV横向排列方法一：

一般情况，默认的DIV是写一个换一行，那么如何定义两个DIV横向排列而不换行呢？

DIV默认的display属性是block。所以每一个DIV都是新的一行，现在把display换成inline就不会换新行了。

  1. < div styledivstyle="background-color:#ff0000;
  2. display:inline;">aaa
 
  • display:inline;">bbb
    •  
  •  

    • 两个DIV横向排列方法二：

    这里使用float:right属性。float做为CSS中的一个属性定义元素向哪个方向浮动。float:right文本或图像会移至父元素中的右侧。

    注意有写情况float属性必须配合width使用，否则失效。

    1.  
    2. 阅读次数：9999
     
  • 发表日期：2009-09-10
    •  
  •  
  •  
  • .bg10{  
  • background-image:url(../images/news_r6_c4.jpg);  
  • height:24px;  
  • line-height:24px;  
  • color:#939393;  
  • }  
  •  

    •  height:24px;和line-height:24px;高度一致，文字垂直居中。
     

    【编辑推荐】

    1. DIV CSS表单布局五个小技巧使用秘笈
    2. 技术分享 如何实现CSS横向导航
    3. 术语汇编 基本CSS滤镜概述
    4. ***实现丰富的CSS文字效果
    5. 鼠标经过时改变DIV背景颜色的三种途径

     

     

    上一篇：简述DDOS防御步骤

    下一篇：sql server create语句实例

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点，每一个服务点的员工都通过宽带路由器进行共享上网，和单位网络保持联...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址，解救无法享受D... 在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...