网页中经常会用到,一个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平均分布的更多相关文章

  1. CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度

    如图: 1.自动换行 </div> 2.限制宽高度 </div> (注意:如果div放在li中还需要加上display:inline-block属性)

  2. div中包着文字,div出现隐藏的时候,文字总是在div外面。

    背景: 给博客加一个侧边栏,点击出现隐藏,每次点击出现或者隐藏,文字总是很突兀的就出来了. 解决: overflow:hidden

  3. 一个div,包含三个小的div,平均分布的样式

    从11月份开始,自学前端开发,写静态页面中,经常用到一个大的div下包含三个小的div,平均分布div大小样式,写过多次,也多次忘记,每次都要现找资料,不想之后,在这么麻烦,索性今天自己记录一下,方便 ...

  4. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  5. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  6. 文字属性和div容器盒的使用基础

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. DIV+CSS如何让图片和文字在同一行!

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  8. 客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出。

    1.客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出. 利用httpclient进行ip地址和端口号连接后,http的输出端作为http请求参数设置.h ...

  9. 实现可调整宽高的DIV(左右拖动和上下拖动)

    前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...

随机推荐

  1. java面向对象基础

    1.对象:用来描述客观事物的一个实体,由一组属性和方法构成. 属性:对象具有的各种特征.(成员变量) 方法:对象执行的操作. 2.类:一组具有相同属性和方法的对象的一个归纳类型.对象是类的一个具体表现 ...

  2. items2 配色

    cat ~/.bash_profile #enables colorin the terminal bash shell exportexport CLICOLOR=1 #sets up thecol ...

  3. 写 test-case心得

    最近,写ticket较多,由于每天有忙不完的工作加不完的班,心里逐渐有一个小人儿在抱怨了.此种情况下,慢慢的写case时边变得懒散,想钻空闲,于是便简简单单总结几个纲要便完事.提交test-case到 ...

  4. Git--分布式版本控制系统

    使用Git实现多人协作开发 1.简述 每创建一个大的web项目都会有团队协作完成, 然这个过程有可能就像毕业生写论文的过程, 这个过程会有很多...修改的版本, 我们的项目也是会经过无休止的改需求, ...

  5. C#读取excel数据到datatable中

    DataTable dtGBPatient = new DataTable(); string strConn;string excelName; //注意:把一个excel文件看做一个数据库,一个s ...

  6. [CSS]多浏览器兼容的垂直居中,兼容多个IE

    相信你都是在兼容垂直居中而烦恼,翻阅多个网站总是找不到理想的方法而苦恼,来到这里你的问题解决了!如果对你有帮助请点个赞,谢谢. 多兼容垂直居中,在IE6-9亲自测试并通过 <!doctype h ...

  7. CountDownLatch如何使用

    正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...

  8. C#字符串(截取)

    1.按照逗号进行截取,并存放在一个数组中 eq:截取字符串,并放在数组中:string[] strArray = strPaths.Split(','); 获取某一个值 string s1=strAr ...

  9. PV IP UV的概念介绍

    IP(独立IP):指独立IP数,不同的IP地址的计算机访问网站的总次数,这个是网站流量分析的一个重要指标.00:00-24:00内相同的IP地址只被计算一次 假如说:赶集网的日独立IP300W,则至少 ...

  10. MySQL_积分兑换的优惠券在某时间段内使用情况_ 20161215

    积分兑换的优惠券在某时间段内使用情况 SELECT a.城市,a.用户ID,a.优惠券ID,a.优惠券名称,a.积分兑换优惠券的张数,b.使用优惠券数量,a.积分兑换优惠券的金额,b.使用优惠券金额 ...