Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/69.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 文本上的Div浮点_Html_Floating - Fatal编程技术网

Html 文本上的Div浮点

Html 文本上的Div浮点,html,floating,Html,Floating,我试图让带有两个图像的div浮动在文本列的顶部,但它一直适合列。理想情况下,我希望图像位于右上角,列位于左侧和下方 标题 Lorem ipsum door sit amet,是一位杰出的领导者。南库苏斯。莫比·乌特·米。纳勒姆·埃尼姆·利奥,埃吉斯塔id,调味品,马萨州拉奥里特·马蒂斯。这是一个非常小的直径。前莫里斯·安特,元素和元素,比本杜姆,波苏尔·西特,尼伯赫。在前庭里有两个小烛台。酒后驾车。8月1日和8月1日 #上校{ -moz列数:3; -moz柱间距:20px; -webkit列

我试图让带有两个图像的div浮动在文本列的顶部,但它一直适合列。理想情况下,我希望图像位于右上角,列位于左侧和下方


标题

Lorem ipsum door sit amet,是一位杰出的领导者。南库苏斯。莫比·乌特·米。纳勒姆·埃尼姆·利奥,埃吉斯塔id,调味品,马萨州拉奥里特·马蒂斯。这是一个非常小的直径。前莫里斯·安特,元素和元素,比本杜姆,波苏尔·西特,尼伯赫。在前庭里有两个小烛台。酒后驾车。8月1日和8月1日

#上校{ -moz列数:3; -moz柱间距:20px; -webkit列数:3; -webkit柱间隙:20px; }
使用此选项

<div id="rotator" style="float: right;">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSGv7Ug4BaJo1r2UjiYBoIkjbxhto3mDk9SxOn4IZWQylnna4-I"/>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSGv7Ug4BaJo1r2UjiYBoIkjbxhto3mDk9SxOn4IZWQylnna4-I"/>
</div>

<div id="col" style="padding-top:20px; padding-bottom:20px">
    <div id="mainhomeimg" style="float:right;"></div>
    <h1>Title</h1>
    <p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo. Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis facilisis massa. Etiam eu urna. Sed porta. Suspendisse quam leo, molestie sed, luctus quis, feugiat in, pede. Fusce tellus. Sed metus augue, convallis et, vehicula ut, pulv</p>
</div>
和演示:


可能会对您有所帮助。如果有任何疑问,请告诉我。

类似的问题?谢谢你的关注,但我希望文本也在图片的左边,而不是下面
<div id="rotator" style="float: right;">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSGv7Ug4BaJo1r2UjiYBoIkjbxhto3mDk9SxOn4IZWQylnna4-I"/>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSGv7Ug4BaJo1r2UjiYBoIkjbxhto3mDk9SxOn4IZWQylnna4-I"/>
</div>

<div id="col" style="padding-top:20px; padding-bottom:20px">
    <div id="mainhomeimg" style="float:right;"></div>
    <h1>Title</h1>
    <p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo. Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis facilisis massa. Etiam eu urna. Sed porta. Suspendisse quam leo, molestie sed, luctus quis, feugiat in, pede. Fusce tellus. Sed metus augue, convallis et, vehicula ut, pulv</p>
</div>
#col {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;

}