一个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%;}

转载于:https://www.cnblogs.com/youmi113/p/6213848.html