Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/86.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html CSS可变宽度浮动div-防止第二个div在第一个div下方缠绕/断线_Html_Css_Twitter Bootstrap 3_Css Float - Fatal编程技术网

Html CSS可变宽度浮动div-防止第二个div在第一个div下方缠绕/断线

Html CSS可变宽度浮动div-防止第二个div在第一个div下方缠绕/断线,html,css,twitter-bootstrap-3,css-float,Html,Css,Twitter Bootstrap 3,Css Float,我有一个div,左侧有一个大小可变的缩略图图像,右侧有另一个div,其中包含我希望保持与右侧对齐的信息,而不在图像div下方换行(在图像下方留下空白) 我尝试了display:inline block来防止信息div在图像下方换行,但如果信息太宽,则会导致信息div在图像div下方换行(在图像右侧留下空白) 我发现的所有解决方案都依赖于div的设置宽度,但在我的例子中,两种宽度都可以是可变宽度 我正在使用引导,但在这种情况下,由于可能的缩略图宽度不同,无法在我的div上使用set cols 使用

我有一个div,左侧有一个大小可变的缩略图图像,右侧有另一个div,其中包含我希望保持与右侧对齐的信息,而不在图像div下方换行(在图像下方留下空白)

我尝试了display:inline block来防止信息div在图像下方换行,但如果信息太宽,则会导致信息div在图像div下方换行(在图像右侧留下空白)

我发现的所有解决方案都依赖于div的设置宽度,但在我的例子中,两种宽度都可以是可变宽度

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

使用内联块时,我的问题是:

有什么想法吗

Html:

那么这个呢:

<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>


一些会导致div下降到缩略图下面的长文本:Lorem ipsum dolor sit amet,quo civibus fuisset laboramus ut,veri ancillae contentions id vix,duo an dolor suscipit。所有人都有完美的前妻,但都是邪恶的
maluisset位于欧洲大学。天鹅绒般的质感。首先,我要强调的是,原则性的辩论通常都是在辩论中进行的。支持温和温和。伊格诺塔·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿佩里亚姆·阿。维生素E
不属于任何一方,不属于任何一方。这是两个实验室的结果,不需要投资,因为这只是一个临时的例子。艾南·费里·帕蒂恩多,在迪肯蒂街。代表团在saepe dicam dicant结束了会议。米阿利
萨佩雷特提奥弗拉斯托斯欧盟。支持欧盟的奥迪奥·伊德克·普拉森。Eos在quidam iracundia解释器,他的故事非常有趣。伊壁鸠鲁是一位改革者,他不支持雄辩。马齐姆泉多eos cu。桋桋桋桋桋。Sed卸载
平庸的不,我的法律是不公平的,每一次的报复都是不公平的。Paulo detracto vituperata是我的朋友。特写梅尔·劳尔·佩西皮图尔,特写劳尔·劳尔·劳尔·劳尔·劳尔·劳尔·改革的必需品特写。诺米纳维酒店。他是一个非平凡的singulis,
我是一名教师。圣阿利恩姆实验室vim ex,斯普兰迪德谩骂ea eos。这是我们的座右铭。在全天临时实验室的实验室设备处,mel Labours Consequintur ei。


谢谢您的建议-非常感谢。理想情况下,我希望它的图像方面的事情不调整大小,因为它只是一个小缩略图(大小可变)。你想实现这一点,只是操纵CSS?据我所知,在指定的条件下,图像区域不可能是灵活的,而底部区域的其余部分也应该是空的,从而保持信息区域相对灵活。@hina10531-我希望仅使用CSS就可以实现这一点。我想一些CSS专家可能没有办法绕过这个问题。我很确定,没有人可以通过在布局层元素上操纵没有固定值(至少是min-*属性)的纯CSS或html来做到这一点。不幸的是,这个想法毫无意义。您说过唯一的解决方案是在div上设置固定宽度?这是最终的,唯一的解决方案。如果你想要一些脚本,如果你同意的话,我可以帮你。
.myapp-image
{
    padding-right: 30px;
}

.mapapp-info
{
    display: inline-block;
}
<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>