我有一個向左浮動的 div。在 div 里面，我有一個影像。差異之后是一個段落。
我希望該段落環繞影像，但我看到大量空白。
.class-0-568 {
float: left;
}
.class-0-569 {
padding-right: 2%;
width: 33%;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}<div class="class-0-568" id="id-0-553">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>這是上面的輸出
輸出
如果我將 float 屬性設定為 img，那么它會按預期作業。
正確輸出
我不明白為什么。有人可以幫幫我嗎？
PS：如果有人想玩，JSFiddle鏈接：
https://jsfiddle.net/chid1989/say7pzqe/#&togetherjs=z8iIlaQmNz
編輯
我嘗試通過 chrome 檢查元素。顯然， div 占用了額外的空間。但我不知道為什么。
檢查
uj5u.com熱心網友回復：
您的影像寬度（由其類引起.class-0-569）為 33%。但那是它的容器 /父元素，即浮動.class-0-568元素。
將 33% 的寬度應用于影像的 父級( .class-0-568) 并將 100% 的寬度應用于影像本身：
.class-0-568 {
float: left;
width: 33%;
}
.class-0-569 {
padding-right: 2%;
width: 100%;
height: auto;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}<div class="class-0-568" id="id-0-553">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>評論后添加： - 實際上更簡單 - 替代方法是在不使用包裝器 div 的情況下浮動影像本身：
#id-0-554 {
float: left;
width: 33%;
margin-right: 2%;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
} <img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>uj5u.com熱心網友回復：
<div>并且<p>都是塊級元素。在文本中浮動影像的正確方法是將<img>直接放在<p>：
<html>
<head>
<style>
.class-0-569 {
padding-right: 2%;
width: 33%;
float: left;
}
.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
</style>
</head>
<body>
<p class="class-0-570" id="id-0-555">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">These offer a description of who you are
</p>
</body>
</html>
小提琴
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/454978.html
上一篇：在兩種不同顏色之間更改像素顏色