此HTML:
<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0">
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 400px; height: auto">
<figcaption style="caption-side: bottom; display: table-caption">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p>Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>
它正确地呈现:
但是,如果将样式宽度更改为25%,如下所示:
<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 25%; height: auto">
它不正确地呈现:
浮动的图形不再显示在段落文本的右侧,而是显示在段落文本的上方。
我的问题是:
- 为什么会这样呢?
- 有没有一种方法可以让任何样式的宽度单位和值工作,同时获得相同的布局/呈现?
JSF中间文件:https://jsfiddle.net/jbx3htfs/
2条答案
按热度按时间gwbalxhn1#
导致此问题的原因是您在错误的位置应用了15%。如果您在图像上使用25%,则图像将填充父级宽度(
figure
)的25%。您必须将宽度应用于图形元素,然后为图像指定100%的宽度:3gtaxfhh2#
因为figure在
<p>
开始之前占据了当前宽度的全部100%。因此,您需要精确地指定图形的宽度,并像下面这样声明它:https://jsfiddle.net/6o51tzqn/