带有图像浮动选项的文本溢出
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带有图像浮动选项的文本溢出相关的知识，希望对你有一定的参考价值。
好吧，我试图将图片放在左边，浮动选项，第一张图片下方不应出现任何文字，直到底部边框。我怎样才能做到这一点？ （我让文字很长，因为我需要考虑不同电脑屏幕的不同分辨率，它可能会换行）
另一个问题，第二个图像，我希望它的left side与第一个的right side对齐，这可能吗？
html在这里：
<html>
<head>
<title> This is an demo </title>
<style>
.left {
float: left;
}
.content {
clear: both;
border-color: #666666;
border-bottom: 3px solid;
}
</style>
</head>
<body>
<div class="content">
<img class="left" src="61add42atw1dnf1k4h4qzj.jpg" />
<p> ThiThis is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraphs is a not so long parThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphThis is a not so long paragraphagraph</p>
<img src="61ab8006jw1dnfas8bvj9j.jpg" />
</div>
</body>
</html>
答案
也许这符合你的需求
http://jsfiddle.net/uqJHf/246/
重要的是overflow:hidden
编辑
.content .image {
float: left;
}
.content .image-aside {
padding-left: 10px;
overflow: hidden;
clear: none;
}
.content .image-aside .image {
margin-left: -10px;
}
.content {
border-color: #666666;
border-bottom: 3px solid;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}<div class="content clearfix">
<div class="image">
<img class="left" src="https://lorempixel.com/200/200/sports/1" width="200" height="200" />
</div>
<div class="image-aside">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, eius nobis natus dolores, suscipit minus maxime ullam fugit sequi, repellat rem? Distinctio placeat minus dignissimos, fugiat magnam magni totam vero nihil blanditiis fugit sapiente
perspiciatis natus iure possimus odio impedit ex, ullam tenetur delectus voluptas? Quasi sed, ipsam vitae hic quam non pariatur ad labore accusamus at vero laudantium suscipit voluptatum, quod eveniet vel temporibus, doloremque voluptate veniam?
Eos nobis dolore eligendi fuga id recusandae iure adipisci temporibus vero nemo harum ab obcaecati architecto, dolores dolorem, esse excepturi saepe quas voluptate beatae totam cum minus consequuntur. Perspiciatis debitis quasi explicabo, quo voluptatem
omnis aliquam porro dolores nesciunt tenetur accusantium laborum sunt earum ducimus nostrum facilis mollitia vero, reiciendis molestias, similique molestiae impedit possimus? Dicta commodi perferendis vero alias autem fugit obcaecati, laborum ut?
Dignissimos, vitae itaque nulla vel repellendus labore praesentium! Nostrum totam quam dignissimos unde eveniet architecto fuga ab aut repellat tenetur voluptates eum sint at modi saepe optio asperiores molestias, illo nobis odio nesciunt impedit
ea. Quia labore, provident quo cumque nisi repudiandae repellendus odio voluptatem voluptatum ipsum molestias possimus sapiente eos iste repellat fugit minus atque harum necessitatibus. Tempora ipsa maiores corporis esse molestiae. Quisquam, animi
aliquid.</p>
<div class="image">
<img class="left" src="https://lorempixel.com/200/200/sports/2" width="200" height="200" />
</div>
</div>
</div>另一答案
您可以使用height:100%和宽度将图像包含在div中：pencentage或pixel。和其他div中的文本，也是左浮动
另一答案
你是说你想要文本换行，但如果它包裹在图像下面那么它应该被剪裁？
在这种情况下，将图像和文本放入具有图像高度的DIV中，并将overflow设置为none。
以上是关于带有图像浮动选项的文本溢出的主要内容，如果未能解决你的问题，请参考以下文章