根據浮動圖像的高度垂直對齊div中的文本

Question

我想構建一個顯示具有說明圖像的html頁面，說明和圖像是通過生成的，並可以找到這兩種常見情況：

<div style="width:500px; padding:10px; border:solid 1px;"> 
    <div style="width:100%; overflow: auto; border:solid 1px;"> 
    <img style="float:right; width:40%" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. 
    </div> 
</div> 

<div style="width:500px; padding:10px; border:solid 1px;"> 
    <div style="width:100%; overflow: auto; border:solid 1px;"> 
    <img style="float:right; width:40%" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. Suspendisse vel tristique massa. Ut lobortis sapien nec libero varius, vitae ullamcorper risus pretium. Nunc vulputate posuere auctor. Phasellus pulvinar nibh a risus semper, a lobortis justo ultricies. Etiam at pretium ligula. Nullam lobortis, nisl nec sollicitudin vestibulum, turpis neque porta neque, pellentesque egestas ipsum nunc id nisl. Morbi quis lacus quam. Pellentesque eget congue neque. Vestibulum elementum arcu nec condimentum posuere. Donec risus lorem, ornare pharetra ex a, lobortis molestie nunc. Suspendisse iaculis est eros, eu vestibulum nisi accumsan eget. Proin eget eleifend eros. 
    </div> 
</div> 

雖然第一文本太短包裹圖像，第二次是足夠LON g來包裝它。

我喜歡這種效果，但我想在第一種情況變化不大，所以這裏是我的問題：

可以垂直對齊文本等根據圖像高度的垂直居中？ （當然，我希望保留較長的文本換行效果）

圖形：

我想這一點：

變成這樣：

Answer 1

Here是你會怎麼做

HTML

<div class="container"> 
    <div class="something"> 
     <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt.</div> 
    </div> 
</div> 
<div class="container"> 
    <div class="something"> 
     <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. Suspendisse vel tristique massa. Ut lobortis sapien nec libero varius, vitae ullamcorper risus pretium. Nunc vulputate posuere auctor. Phasellus pulvinar nibh a risus semper, a lobortis justo ultricies. Etiam at pretium ligula. Nullam lobortis, nisl nec sollicitudin vestibulum, turpis neque porta neque, pellentesque egestas ipsum nunc id nisl. Morbi quis lacus quam. Pellentesque eget congue neque. Vestibulum elementum arcu nec condimentum posuere. Donec risus lorem, ornare pharetra ex a, lobortis molestie nunc. Suspendisse iaculis est eros, eu vestibulum nisi accumsan eget. Proin eget eleifend eros.</div> 
    </div> 
</div> 

CSS

.container { 
    width:500px; 
    padding:10px; 
    border:solid 1px; 
} 
.something { 
    width:100%; 
    overflow: auto; 
    border:solid 1px; 
} 
.something>img { 
    float:right; 
    width:40% 
} 

JS

$(document).ready(function() { 
    var numberOfItems = $(".container").length; 
    for (var i = 0; i < numberOfItems; i++) { 
     var imageHeight = $(".container:eq(" + i + ")").children(".something").children("img").height(); 
     var divHeight = $(".container:eq(" + i + ")").children(".something").children("div").height(); 
     if (divHeight < imageHeight) { 
      $(".container:eq("+i+")").children(".something").children("div").css({ 
       "margin-top": (imageHeight - divHeight)/2 + "px" 
      }); 
     } 
    } 
}); 

---

編輯

對於上面工作了jQuery，包括下面的<header>標籤（呼叫你所有的jQuery的文檔之前）

片斷

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

看看this網站了解更多的信息

Answer 2

使包裝div顯示：table和text div display：table-cell; verticle對齊：中間;

如果不工作，那麼也適用溢出：隱藏的文本DIV