網頁中經常會用到，一個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%;}