gpt4 book ai didi

html - 带有图像 float 选项的文本溢出

转载 作者:太空宇宙 更新时间:2023-11-04 05:15:28 25 4
gpt4 key购买 nike

好吧,我尝试将图片放在左侧,使用 float 选项,并且第一张图片下方不应出现文本,直到底部边框。我怎样才能做到这一点?(我把文字弄长了,因为需要考虑不同电脑屏幕的不同分辨率,可能会换行)

另一个问题,第二张图片,我希望它的左侧与第一个图片的右侧对齐,这可能吗?

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>

enter image description here

最佳答案

也许这适合您的需求

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>

关于html - 带有图像 float 选项的文本溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8257789/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com