Question

我有一个div，左边有一个可变大小的缩略图，右边有另一个div，我想保持对齐的信息，而不包裹在图像div下面（在图像下留下空白区域）。 / p>

我尝试过显示：内联块以防止信息div包裹在图像下方，但如果信息太宽则会导致信息div在图像div下方换行（将空格留在右侧）图像）。

我发现的所有解决方案都依赖于div的设置宽度，但在我的情况下，两个宽度都可以是可变宽度。

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

使用内联块时出现问题：的 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>

CSS变量宽度浮动div - 防止第一个div下面的第二个div换行/换行

1 个答案: