一个div,包含两个div,调整文字位置和div平均分布
网页中经常会用到,一个div下平均分布两个小的div,两个小的div,显示的内容为图片还比较好处理,显示文字则不好控制效果,今天写了一个如图效果的

html:
<div class="hezuo">
<div class="hezuoLeft">
<h2>XXXXX</h2>
</div>
<div class="hezuoRight">
<p>XXXXXXXXXXXXX</p>
</div>
</div>
css:
.hezuo{
margin: 0 atuo;
text-align:center;
}
.hezuoLeft{
margin: 100px 0px 30px 280px;
height :250px;
width:420px;
float:left;
height:60px;
line-height:40px;
}
.hezuoRight{
margin: 30px 400px 30px 5px;
height :250px;
width:300px;
float:right;
font-size: 16px;
}
.hezuoLeft h2{
text-align: center;
font-size: 28px;
}
.hezuoRight p{
text-align: left;
}
我使用margin来控制文字位置,还不知道是否通用,之后有好的方法,会补上。
顺便说一下网页自适应和图片自适应
网页自适应,在html中加入一句:
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
图片自适应则在Css样式中写入:img{width:100%;height:100%;}
一个div,包含两个div,调整文字位置和div平均分布的更多相关文章
- CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
如图: 1.自动换行 </div> 2.限制宽高度 </div> (注意:如果div放在li中还需要加上display:inline-block属性)
- div中包着文字,div出现隐藏的时候,文字总是在div外面。
背景: 给博客加一个侧边栏,点击出现隐藏,每次点击出现或者隐藏,文字总是很突兀的就出来了. 解决: overflow:hidden
- 一个div,包含三个小的div,平均分布的样式
从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- 在div中设置文字与内部div垂直居中
要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...
- 文字属性和div容器盒的使用基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- DIV+CSS如何让图片和文字在同一行!
在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...
- 客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出。
1.客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出. 利用httpclient进行ip地址和端口号连接后,http的输出端作为http请求参数设置.h ...
- 实现可调整宽高的DIV(左右拖动和上下拖动)
前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...
随机推荐
- MySQL Workbench “Error Code: 1175” 的解决方法
转自:http://www.linuxidc.com/Linux/2012-04/59333.htm 当用MySQL Workbench进行数据库的批量更新时,执行一个语句会碰到以下错误提示: Err ...
- php使用saop简单例子和注意事项
首先配置下PHP的soap环境支持: 找到php.ini文件:extension=php_soap.dll :always_populate_raw_post_data = -1 删除掉": ...
- IOS :编译时出现的错误 ,希望可以有所帮助
1."std::ios_base::Init::~Init()", referenced from 答1: 如果出现这样的编译问题,是需要再加进libstdc++.dylib和li ...
- oracle 实现ID自增
CREATE TABLE testTable1 ( ID INT NOT NULL, NAME ) NOT NULL, PRIMARY KEY(ID) ) TABLESPACE MYDB; --创建自 ...
- html5 history api
1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...
- 实数---Currency讲解
Currency 实际上是 Int64 的变体,Int64/10000 就是实际的值
- python学习(解析python官网会议安排)
在学习python的过程中,做练习,解析https://www.python.org/events/python-events/ HTML文件,输出Python官网发布的会议时间.名称和地点. 对ht ...
- svn更新操作时提示database is locked
If you're on Windows version just let's do the next: Right click on the repo folder and go to Tortoi ...
- adb无法使用,提示error: unknown host service的解决办法
此时,需要辨别电脑的5037端口被哪个应用程序占用的方法:(使用adb时需要5037端口是空闲的) 1. 打开命令行,输入命令:netstat -ano |findstr "5037&quo ...
- linux 学习6 软件包管理 资料链接
软件包管理 这一章看得比较随意 先大概记点东西. RPM安装很繁琐,因为依赖性,手动安装太麻烦. ______我觉得直接yum在线安装就好了,很直接方便. 但是要特别注意的地方 在用yum升级或者卸载 ...