垂直對齊底部IMG和文字使用浮動

Question

我試圖對齊文本塊，並使用

display:table-cell; vertical-align:bottom; 

這個工作，但只要我浮動範圍的權利在同一行上的圖像時，垂直對齊停止工作 任何人都可以伸出援助之手，請
我試圖對齊文本底部，漂浮在藍色的跨度向右
我的繼承人小提琴：http://jsfiddle.net/nalagg/YpVnw/2/

Answer 1

試着增加寬度包含div：

.mcone{ height:416px; width: 530px; float:left;} 

Answer 2

給這一個鏡頭：http://jsfiddle.net/YpVnw/5/

我在包裝紙設置overflow: hidden。

Answer 3

您在使用什麼類型的顯示器時不一致。對於「包裝」div，您使用的是display：block;然後對於內部內容（img，span），您使用display：table-cell（沒有爲父div指定錶行，並且display：table爲錶行的父div）

試試這個：

<div id="table"> 
     <div id="table-row"> 
      <div class="table-cell"> 
       <img src="http://beta.images.theglobeandmail.com/archive/01397/web-verizon_jpg_1397343cl-8.jpg" alt="" width="412" height="416" class="valign-middle"/> 
      </div> 
      <div class="table-cell valign-bottom bgcolor"> 
       <span class='georgia'> Tkquis, dignissim sit amet erat. Cras quis diam s leo vel urna dignissim blandit. Ut ultrices, turpis dolor&nbsp; ntum nulla, eget euismod nisi met, eget euismod nisi metus sit amet nisl. Cu amet nisl. asdCum vitae nisi interdum elit sagittis vestibsulum. volutpat por ttitor. Vestibulum interdum, dolor eget ultridfadfsces ultrices,er turpis m vitae nisi interdum </span> 
      </div> 
     </div> 
    </div> 

#table { display: table; } 
#table-row { display: table-row; } 
.table-cell { display: table-cell; } 
.valign-bottom { vertical-align: bottom; } 
.valign-middle { vertical-align: middle; } 
.bgcolor { background-color: #00CCCC; }