NBR-hugh / freecodecamp-practice

Practice everyday
0 stars 0 forks source link

如何将文字与图片置于一排并且可以调整? #9

Open NBR-hugh opened 8 years ago

NBR-hugh commented 8 years ago

采用div,class为row与col-md-_,改变_大小来改变位置

效果

http://codepen.io/NBR-hugh/pen/rroppb

程序

<div class="  row">
<div class=" col-md-1">
    </div>
        <div class="col-md-8 text-left "> 
           <h2>The New Of Front-End Developer </h2>
           <h3>Learning language:HTML,CSS,JavaScript</h3>
           <h3>The Begin Date:2016.10.16</h3>
           <h2>"Follew My Heart And Practice Hard !"</h2>
        </div>
         <div>
<img class=" img-reponsive  border" src="http://ww2.sinaimg.cn/small/8880bb4cjw1f8zopuiy0xj20hs0hsmy8.jpg" alt="头不见了……" >
         </div>          
    </div>
NBR-hugh commented 8 years ago

使得图片与文字相适应,正好对称,则添加css:

img{
  vertical-align:middle;
  width:100%;
  height:100%;}