html - 根据 float 图像的高度垂直对齐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>

虽然第一个文本太短而无法包裹图像，但第二个文本足够长以包裹图像。

我喜欢这种效果，但我想在第一种情况下做些改变，所以这是我的问题:

是否可以垂直对齐文本，使其根据图像高度垂直居中？ (当然我想用更长的文字保留环绕效果)

以图形方式:

我想要这个:

变成这样:

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有关这方面的更多信息的网站