Question

我希望在肖像照片旁边显示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>

Answer 1

只需将float：left添加到你的div中。

Answer 2

你应该将width：auto添加到你的第二个div并将overflow设置为hidden，就像我在这里完成的那样：http://jsfiddle.net/h5CU3/。您还可以向第一个块添加水平边距（边距：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>

Answer 3

你需要添加样式

overflow: hidden;

Answer 4

这样做你想要的吗？（左边距应设置为img的宽度。

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

Answer 5

Flexbox可以做到这一点，我还没有尝试过，但我已经读过它了。
我敢肯定这就是你要找的东西。

Flexbox是一个持续的项目，可以轻松放置在您想要的位置。
它具有内置功能，可自动填充剩余空间。

http://learnlayout.com/flexbox.html（来源：http://learnlayout.com/）

CSS3 - 将div放在全屏高度的肖像画面旁边

5 个答案: