`
radzhang
  • 浏览: 302737 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

div水平排列

    博客分类:
  • html
 
阅读更多

方法一:

一般情况,默认的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 文本或图像会移至父元素中的右侧。 

分享到:
评论

相关推荐

    CSS网页布局DIV水平居中的各种方法[参考].pdf

    CSS网页布局DIV水平居中的各种方法[参考].pdf

    暖色调水平排列的CSS圆角网站菜单代码.rar

    暖色调水平排列的CSS网站菜单实例,很实用的一款网站菜单特效,好像以前在淘宝网见到过这种菜单,现在本款菜单可用在各种企业、公司网站中,支持鼠标的响应效果,圆角的风格,视觉效果相当不错了。技术实现上,基于...

    Bootstrap实现水平排列的表单

    通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。...2、把标签和控件放在一个带有 class .form-group 的 &lt;div&gt; 中。 3、向标签添加 class .control

    JQuery&CSS;&CSS;+DIV实例大全.rar

    31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用...

    element中el-container容器与div布局区分详解

    当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。 el-header:顶栏容器。 el-aside:侧边栏容器。 el-main:主要区域容器。 el-footer:底栏容器。 以上组件采用了 flex 布局,elemen-ui官方...

    div+css有实例,易学易懂

    div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...

    CSS 将两个button按钮垂直+水平居中

    CSS 将button按钮垂直+水平居中 参考文章:CSS实现垂直居中的5种方法 具体效果如图: 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度...

    WEB前端,HTML,制作一个网站(期末,作业,CSS)

    (3)包含导航栏,导航栏水平排列,导航项目可采用虚拟超链接。 CSS设置导航样式。 (4)包含段落文字。 CSS设置文字样式。 (5)至少用到1个图片。 CSS设置图片样式。 (6)至少包含一个表单域,表单域里...

    中国传统文化主题的网页页面设计

    (3)包含导航栏,导航栏水平排列,导航项目采用虚拟超链接。 CSS设置导航样式。 (4)包含段落文字。 CSS设置文字样式。 (5)至少用到1个图片。 CSS设置图片样式。 (6)包含一个表单域,表单域里包含至少一个...

    css的核心内容 标准流、盒子模型、浮动、定位等分析

    1、块级元素:如:&lt;div&gt;&lt;/div&gt;2...&lt;div class=style2&gt;我的未来不是梦&lt;/div&gt;栏目一&lt;/span&gt;&lt;span class=style2&gt;栏目二&lt;/span&gt;&lt;br&gt;阳光男孩&lt;/span&gt;&lt;span class=style3&gt;栏目三以上是标签的一个排列方式,以下是网页内容的呈

    css3 flex实现div内容水平垂直居中的几种方法

    一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反)  ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-...

    jQuery Mobile 导航栏代码

    导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role=”button”)。 使用 data-role=”navbar” 属性来定义导航栏: 代码如下:&lt;div data-...

    JQuery Mobile实现导航栏和页脚

    导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部。 默认地,导航栏中的链接会自动转换为按钮(无需 data-role=”button”)。 导航栏部分的代码一般放置在data-role为header的div的内。 &lt;div data-role=...

    vue3-blocks-tree:vue3块组织树视图组件。 分层的水平或垂直树

    用法&lt; template&gt; &lt; h1&gt;Basic&lt;/ h1&gt; &lt; div&gt; &lt; blocks xss=removed xss=removed xss=removed xss=removed&gt;&lt;/ blocks&gt; &lt;/ div&gt; &lt; h1&gt;With slots&lt;/ h1&gt; &lt; div&gt; &lt; blocks-tree : data = " treeData " : horizontal = ...

    CSS实现三栏布局的四种方法示例

    可能有人不理解三栏布局是什么,其实三栏布局页面分为左中右三部分,然后对中间一部分做自适应的一种布局方式,下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法,需要的朋友可以参考借鉴,下面来一起看看...

    4款CSS网站菜单,超乎想像的美.rar

    4款不同颜色风格的CSS网站菜单,超乎想像的美,横向水平排列的CSS DIV菜单特效,绝对漂亮的菜单,兼容性也是想当强,几乎支持所有的浏览器,4个菜单做在一个HTML演示页面上了,自己可以手动扒出来,用的图片也不多,...

    零基础学HTML CSS源代码

    div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示CSS基础部分知识。 CSS基础.html 演示CSS基础链接知识用法。 style1.css ...

    bootstrap3.0教程之表单(form)使用详解

    3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 9.总结 基本案例单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的&lt;input&gt;、&lt;textarea&gt;和&lt;select&...

    《CSS设计彻底研究》光盘源码

    第7章 竖直排列的导航菜单  第8章 水平导航菜单  第9章 下拉菜单  第10章 表格也精彩  第 11章 圆角设计  第12章 应用Spry制作高级网页组件  第13章 固定宽度布局剖析与制作  第14章 变宽度网页布局...

Global site tag (gtag.js) - Google Analytics