我想显示一个 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/