一个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讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...
随机推荐
- LPC2478_调试心得(转)
1.在调试“E:\htwang\smart2200v201\ARM嵌入式系统实验教程(二)\开发板出厂编程程序\液晶显示程序\LCM_Disp”的程序时,想使用外部RAM进行仿真调试,在将ADS1.2 ...
- opencv基于混合高斯模型的图像分割
#include "stdafx.h" #include <opencv\cv.h> #include <opencv\highgui.h> #includ ...
- django--模板(七)
1.模板加载 一个项目可以有多个应用,每个应用下都可以有模板,思考模板的查找顺序?
- 1 《JavaScript高级程序设计》学习笔记(1)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...
- 再谈vertical-align与line-height
每次遇到多个inline-block元素排列的怪异垂直位置的问题的时候都可以通过经验,设置vertical-align来解决,没深入研究过,现在需要分析总结下这个问题. 问题引出 有小鲜肉新做了个页面 ...
- osx 编译安装配置 ruby on rails
下载源代码: curl -O http://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.2.tar.gz 解压: .tar.gz 编译: cd ruby- ./ ...
- JS面向对象的程序设计
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...
- 100怎么变成100.00 || undefined在数字环境下是:NaN || null在数字环境下是0 || 数组的toString()方法把每个元素变成字符串,拼在一起以逗号隔开 || 空数组转换成字符串后是什么?
100怎么变成100.00?
- 用浏览器模拟各种User Agent
转至:http://www.cnblogs.com/top5/archive/2012/06/07/2540686.html 测试页面的时候经常需要不同的User Agent,Firefox.Chro ...
- Java的版本分类
J2EE (JavaEE)Java2 Enterprise Edition定位在服务器端的应用 J2SE(JavaSE)Java2 Standard Edition定位在个人计算机上的应用 J2ME( ...