5-3編程挑戰，增加垂直居中的問題。
有幾個問題、
1、div class=“left” 中，文本怎么自動換行，后面的數字都不知道跑哪去了。
2、sub_left 中，我插入了一張圖片，但是如何讓這張圖片顯示在正中間呢？
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>混合布局練習</title>
<style>
body{?margin:0;?padding:0;?font-size:20px;?font-weight:bold;}
div{?text-align:center;?line-height:50px;}
.top{?height:100px;?background:pink;}
.head,.main{?width:900px;?margin:0?auto}
.head{?height:100px;?background:#09F;}
.left{?width:200px;?height:600px;?background:blue;?float:left;}
.sub_l{?width:500px;?height:600px;?float:left;?background:yellow;}
.sub_r{?width:200px;?height:600px;?float:right;?background:blue;}
.foot{?height:50px;?background:#000;?clear:both}
.wrap{
height:600px;
line-height:20px;
display:table-cell;
vertical-align:middle;}
.img{
????height:600px;
padding:0?180px;???
/*???自己弄的土辦法，一點都不標準，要是圖片寬度變了，又要揣摩半天，不知各位大神有沒有更好的辦法???*/
????display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/????
}
</style>
</head>
<body>
<div?class="top">
<div?class="head">我是腦殼</div>
</div>
<div?class="main">
<div?class="left">
???? <div?class="wrap">
<p>
????我是左邊，但是我要居中了，不只中文要居中，數字也要居中，而且是垂直居中11111111111111111111111111111111111222222222222222222222231233213,但是后面這些數字去哪了，敢不敢給我來個自動換行！
</p>
????????</div>
</div>
<div?class="right">
???? <div?class="sub_l">我是中間
???????? <div?class="img">
???? <img?src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg"?title="害羞的小女生"/>
</div>
??? </div>
???? <div?class="sub_r">我是右邊
???? </div>
</div>
</div>
<div?class="foot"?><p?style="color:white">我是腳隔</p>
</div>
</body>
</html>
2015-12-21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局練習</title>
<style>
body{ margin:0; padding:0; font-size:20px; font-weight:bold;}
div{ text-align:center; line-height:50px;}
.top{ height:100px; background:pink;}
.head,.main{ width:900px; margin:0 auto}
.head{ height:100px; background:#09F;}
.left{ width:200px; height:600px; background:blue; float:left;word-break: break-all;word-wrap: break-word;}
.sub_l{ width:500px; height:600px; float:left; background:yellow;}
.sub_r{ width:200px; height:600px; float:right; background:blue;}
.foot{ height:50px; background:#000; clear:both}
.wrap{
? ? height:600px;
? ? line-height:20px;
? ? display:table-cell;
? ? vertical-align:middle;}
? ? ?
.img{
? ? height:300px;
? ? padding:85px 160px 235px 160px; ??
? ? /* ? 自己弄的土辦法，一點都不標準，要是圖片寬度變了，又要揣摩半天，不知各位大神有沒有更好的辦法 ? */
? ? display:table-cell;/*IE8以上及Chrome、Firefox*/
? ? vertical-align:middle;/*IE8以上及Chrome、Firefox*/ ? ?
} ?
</style>
</head>
?
<body>
<div class="top">
? ? <div class="head">我是腦殼</div>
</div>
<div class="main">
? ? <div class="left">
? ? ? ? <div class="wrap">
? ? ? ? <p>
? ? 我是左邊，但是我要居中了，不只中文要居中，數字也要居中，而且是垂直居中11111111111111111111111111111111111222222222222222222222231233213,但是后面這些數字去哪了，敢不敢給我來個自動換行！
? ? ? ? </p>
? ? ? ? </div>
? ? ?
? ? </div>
? ? <div class="right">
? ? ? ? <div class="sub_l">我是中間
? ? ? ? ? ? <div class="img">
? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
? ? ? ? ? ? </div>
? ? ? ? ?</div>
? ? ? ? <div class="sub_r">我是右邊
? ? ? ? </div>
? ? </div>
</div>
<div class="foot" ><p style="color:white">我是腳隔</p>
</div>
?
?
</body>
</html>
2016-01-16
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>混合布局練習</title> <style> body{?margin:0;?padding:0;?font-size:20px;?font-weight:bold;} div{?text-align:center;?line-height:50px;} .top{?height:100px;?background:pink;} .head,.main{?width:900px;?margin:0?auto} .head{?height:100px;?background:#09F;} .left{?width:200px;?height:600px;?background:blue;?float:left;?word-break:break-all;?word-wrap:break-word;} .sub_l{?width:500px;?height:600px;?float:left;?background:yellow;?position:?relative;} .sub_r{?width:200px;?height:600px;?float:right;?background:blue;} .foot{?height:50px;?background:#000;?clear:both} .wrap{ ????height:600px; ????line-height:20px; ????display:table-cell; ????vertical-align:middle; } .img{ ????position:?absolute; ????top:?50%; ????left:?50%; } .imgrm{ ????position:?relative; ????right:?50%; ????bottom:?90px; } </style> </head> ? <body> <div?class="top"> ????<div?class="head">我是腦殼</div> </div> <div?class="main"> ????<div?class="left"> ????????<div?class="wrap"> ????????<p> ????我是左邊，但是我要居中了，不只中文要居中，數字也要居中，而且是垂直居中11111111111111111111111111111111111222222222222222222222231233213,但是后面這些數字去哪了，敢不敢給我來個自動換行！ ????????</p> ????????</div> ????? ????</div> ????<div?class="right"> ????????<div?class="sub_l"><span>我是中間</span> ????????????<div?class="img"> ????????????????<div?class="imgrm"> ????????????????<img?src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg"?title="害羞的小女生"/> ????????????????</div> ????????????</div> ?????????</div> ????????<div?class="sub_r">我是右邊 ????????</div> ????</div> </div> <div?class="foot"?><p?style="color:white">我是腳隔</p> </div> ? ? </body> </html>