一个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讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...
随机推荐
- Geodatabase数据模型
1 Geodatabase概念 Geodatabase是ArcInfo8引入的一种全新的面向对象的空间数据模型,是建立在DBMS之上的统一的.智能的空间数据模型.“统一”是指,Geodatabase ...
- css狂记
接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性 ...
- 删除项目中的.svn信息
有时候我们新开发一个项目时,会将以前的项目从svn上down下来,然后复制一份.这样就会有个问题,项目中的svn信息就会一直存在.下面介绍删除方法: 1.新建一个.txt的文档.然后将下面代码粘贴到文 ...
- 【Python】pip国内安装源
豆瓣安装源 pip install packages -i http://pypi.doubanio.com/simple --upgrade --trusted-host pypi.doubanio ...
- 如何将ASP.NET MVC所有参数均自动设置为默认
今天看到CSDN上有个问题觉得有点意思:"可不可以ASP.NET MVC所有参数均自动设置为默认" public class HomeController : Controller ...
- GNS3 桥接虚拟网卡 telnet 实验
网上很多桥接本地网卡的,一直测试不通.无奈,本人桥接vmware 虚拟网卡通! 1: 2: 3:telnet 加密实验 R1(config)#line vt R1(config)#line vty 0 ...
- vi、vim 查找替换
vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂的功能,记录几种在此,方便以后查询. :s/vivian/sky/ 替换当前行第一个 vivian ...
- lnmp编译安装
lnmp超详细编译安装教程 linux采用的是centos,软件包统一放在/usr/local/src目录下.由于 centos源比较老,而且更新起来也比较慢,此处建议你换成163源.提示:如果你真打 ...
- C++使用protobuf传输中间包含\0的字节数组
The C++ implementation of protocol buffers returns the byte and string types as std::string. This st ...
- Perl爬取江西失信执行
#! /usr/bin/perl use strict; use Encode qw(encode decode); binmode(STDIN,":encoding(utf8)" ...