HTML+CSS-如何定义让两个div横向排列
方法一:
一般情况,默认的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横向排列的更多相关文章
- 如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- 两个div横向排列,顶端对齐的方式。
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...
- 如何让div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- div横向排列
在网页布局中,常常有几个div横向排列的需求,此时,可以采用浮动的方式: 1.左右浮动: <div class="main"> <div class=" ...
- DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...
- css定位!如何将两个表格并排排列!
直接创建两个div,之后设置每个占页面的一般,设置左对齐即可.<div style="width:50%;hight:100%;float:left:"><for ...
- css实现内容不相同的左右两个div等高
问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...
- html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
随机推荐
- vue操作本地存储
const ls = window.localStorage const ss = window.sessionStorage export const LStorage= { getItem(key ...
- 《Android虚拟机》--内存分配策略
No1: Java在内存分配时会涉及到以下区域: 寄存器:我们在程序中无法控制 栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 堆:存放用new产生的数据 静态域:存放在对 ...
- PHP包管理
前言 在nodejs中,存在npm,python中也存在pip,而php之前不存在类似的东西,导致想要安装一个包,只能去复制代码,但是现在,使用composer可以简单的安装一个包(但是compose ...
- CF438 The Child and Sequence
题意: 给定一个长度为n的非负整数序列a,你需要支持以下操作:1)给定l,r,输出a[l] + a[l+1] + ... + a[r] 2)给定l,r,x, 将a[l].a[l+1]......a[r ...
- saltstack 开发
最近跟总部一个项目用saltstack封装api来用,可以很轻松的实现restful api发布,提供别人直接调用 salt 本身有2个内置变量(__salt__, __opts__),通过salt ...
- React Native 系列(六)
前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...
- 【轮廓线DP】POJ2411-Mondriaan's Dream
今天美国的院士过来讲课XD以为会很无聊但是谜之好听,而且英语基本上都听懂了的样子♪(´▽`) 逃到图书馆来写解题报告 [题目大意] 给出一个m*n的方格,用2*1的骨牌覆盖有几种情况. [思路] 最基 ...
- bzoj 2693
收获: 1.积性函数的积也是积性函数,基本的积性函数:常数函数,正比例函数,欧拉函数,Mobius函数,积性函数一般都知道表达式,所以一般都可以在线性筛时搞定. 2.遇到整除求和时,这个东西就已经是最 ...
- DML、DDL、DCL是什么?
一.DML DML(data manipulation language)数据操纵语言: 我们经常会用到的 INSERT.DELETE.UPDATE.SELECT语句. 主要用来对数据库的数据进行一些 ...
- JDK源码(1.7) -- java.util.AbstractList<E>
java.util.AbstractList<E> 源码分析(JDK1.7) ------------------------------------------------------- ...