gpt4 book ai didi

image - CSS3 - 将 div 放在全屏高度的纵向图片旁边

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

我想显示一个 div除了肖像照片,但我想要 div填充图片右侧和网页边缘之间的所有剩余间隙。

方案如下:

xxxxxxxxxxxx
x| P || |x
x| i || |x
x| c || D |x
x| t || i |x
x| u || v |x
x| r || |x
x| e || |x
xxxxxxxxxxxx

在哪里xxx是网页的边缘。

我无法获取图片尺寸,因为我对许多其他人像图片使用相同的网页结构,比例、高度/宽度都不相同....

我能做的是:

<body>

<img style="float:left; height:100%;" src="portraitpictures_url" >

<div style="width: 100%;background:blue;color:white; border-radius:10px;" >

<p>The div text</p>

</div>

</body>

但这不是我想要的,因为我的 div宽度为 100%,所以我的 div边框部分隐藏在图片后面。如果我把我的 <img> <div> 之间的标签和 </div> ,我的图片高度从body溢出了所以不是“屏幕高度”。

我很确定,可以做得更好,但我被困在这里......

这里是Django模板风格的完整代码:

<body>

<img style="float:left; height:calc(100% - 45px);" src="{{ MEDIA_URL }}{{ A.picture.name }}" >

<div style=" width: 100%; margin-top: 2%;background:red ;color:blue; border-radius:10px;" >

<p>The div text</p>

</div>

</body>

最佳答案

您应该将 width:auto 添加到您的第二个 div 并将溢出设置为隐藏,就像我在这里所做的那样:http://jsfiddle.net/h5CU3/ .您还可以向第一个 block 添加水平边距 (margin :0 5px 0 0),以防您不希望它看起来合并。

<body >
<div style="float:left; height:100%;">
<img src="portraitpictures_url" >
</div>
<div style="overflow:hidden;width:auto;overflow:hidden;background:blue;color:white; border- radius:10px;" >
<p>The div text</p>
</div>
</body>

关于image - CSS3 - 将 div 放在全屏高度的纵向图片旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22962576/

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