html - CSS 可变宽度 float div - 防止第二个 div 换行/换行低于第一个 div

Question

我有一个 div，左边有一个可变大小的缩略图，右边有另一个 div，其中包含我希望保持右对齐的信息，而不环绕在图像 div 下方(在图像下方留下空白)。

我试过 display: inline-block 来防止信息 div 在图像下方换行，但是如果信息太宽，它会导致信息 div 在图像 div 下面换行(在右边留出空白)图像)。

我找到的所有解决方案都依赖于 div 的设置宽度，但在我的例子中，两个宽度都可以是可变宽度。

我正在使用 bootstrap，但由于可能的缩略图宽度不同，在这种情况下无法在我的 div 上使用 set cols。

这是我在使用 inline-block 时遇到的问题:<强> http://plnkr.co/edit/wfbQ7He3lM5Lz2amMiCK?p=preview

有什么想法吗？

HTML:

<div class="row">
    <div class="col-md-12">
        <div class="myapp-image pull-left">
            <a href="#" class="thumbnail">
                <img class="img-responsive" src="http://placekitten.com/195/133" alt="Kittens">
            </a>
        </div>
        <div class="myapp-info pull-left">
            <p>
                <strong>Some long text that will cause div to drop below thumbnail image:</strong> Lorem ipsum dolor sit amet, quo civibus fuisset laboramus ut, veri ancillae contentiones id vix, duo an dolor suscipit. Omnis possit perfecto per ex, inimicus maluisset at eum. Vel et suas qualisque. Ut pri homero antiopam omittantur, alia congue principes mei no.
                Oratio indoctum disputationi usu at. Pro blandit moderatius ne. Ignota aperiam adolescens est in, per adolescens accommodare at. Ne vitae nonumes nusquam pri, ex has suas putent admodum. Et mel duis labitur, noluisse invenire ex sed, qui case justo scripserit ne.
                Ei nam ferri partiendo, est at dicunt docendi. Delectus concludaturque nec id. Vim at saepe dicam dicant. Mea alii saperet theophrastus eu. Pro eu odio idque praesent.
                Eos at quidam iracundia interpretaris, his tale verear iuvaret ne. Epicuri reformidans ius ne, pro no quem pertinax eloquentiam. Mazim quando eos cu. Te cum insolens cotidieque. Sed deserunt mediocrem no, ei legere ancillae suscipiantur nec, everti suscipit reprimique et pro. Paulo detracto vituperata id mea. Cu mel labore percipitur, labores reformidans necessitatibus cu duo.
                Illum nominavi corrumpit eum ne. His an nonumy singulis, quo legere semper instructior ne. Sint alienum laboramus vim ex, splendide vituperatoribus ea eos. Malis dictas regione an usu. At quo habeo appareat laboramus, mel labores consequuntur ei, at omnis tempor tritani cum.
            </p>
        </div>
    </div>
</div>

CSS:

.myapp-image
{
    padding-right: 30px;
}

.mapapp-info
{
    display: inline-block;
}

Answer 1

这个怎么样:

<div class="col-md-12">
<div class="col-xs-6">
    <a href="#" class="thumbnail">
        <img class="img-responsive" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/3/4/1393940776876/Dahlia-Karma-Choc-009.jpg" alt="Kittens">
    </a>
</div>
<div class="col-xs-6">
    <p>
        <strong>Some long text that will cause div to drop below thumbnail image:</strong> Lorem ipsum dolor sit amet, quo civibus fuisset laboramus ut, veri ancillae contentiones id vix, duo an dolor suscipit. Omnis possit perfecto per ex, inimicus
        maluisset at eum. Vel et suas qualisque. Ut pri homero antiopam omittantur, alia congue principes mei no. Oratio indoctum disputationi usu at. Pro blandit moderatius ne. Ignota aperiam adolescens est in, per adolescens accommodare at. Ne vitae
        nonumes nusquam pri, ex has suas putent admodum. Et mel duis labitur, noluisse invenire ex sed, qui case justo scripserit ne. Ei nam ferri partiendo, est at dicunt docendi. Delectus concludaturque nec id. Vim at saepe dicam dicant. Mea alii
        saperet theophrastus eu. Pro eu odio idque praesent. Eos at quidam iracundia interpretaris, his tale verear iuvaret ne. Epicuri reformidans ius ne, pro no quem pertinax eloquentiam. Mazim quando eos cu. Te cum insolens cotidieque. Sed deserunt
        mediocrem no, ei legere ancillae suscipiantur nec, everti suscipit reprimique et pro. Paulo detracto vituperata id mea. Cu mel labore percipitur, labores reformidans necessitatibus cu duo. Illum nominavi corrumpit eum ne. His an nonumy singulis,
        quo legere semper instructior ne. Sint alienum laboramus vim ex, splendide vituperatoribus ea eos. Malis dictas regione an usu. At quo habeo appareat laboramus, mel labores consequuntur ei, at omnis tempor tritani cum.

    </p>
</div>