Question

＆＃13;

 <div style="border-style:solid; margin:auto;">
   <div style="position:absolute;">
     <div style="background:yellow; border-style:dotted; height:300px; width:300px">
       <h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
     </div>
   </div>
   
   <img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
 </div>
 
 <div style="border-style:solid">
   <h2> THIS IS THE FOOTER</h1>
 </div>

＆＃13;

我试图在图像上放置div，如何让浮动div占据空间，因此页脚div将被相应推动。

Answer 1

我不确定你在问什么。你是否希望黄色div仅占用其后面div的空间（使用Google Doodle）？或者你想要反过来，也就是说，你希望页脚高度自动调整到黄色div高度？

Answer 2

我不确定我完全理解。你的意思是让包含图像的div具有最小高度吗？您可以使用min-height属性，如下所示：

 <div style="border-style:solid; margin:auto;min-height:80%">
   <div style="position:absolute;">
 <div style="background:yellow; border-style:dotted; height:300px; width:300px">
   <h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
 </div>
   </div>

   <img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
 </div>

 <div style="border-style:solid">
   <h2> THIS IS THE FOOTER</h1>
 </div>

- 编辑：如果你在div容器中寻找某种背景图像，你可以控制你可以做这样的事情：

<html>
<head>
</head>
<body>
    <div style="border-style:solid; margin:auto">
       <div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
             <div style="border-style:dotted; height:400px; width:600px">

             </div>
       </div>
     </div>

     <div style="border-style:solid">
       <h2> THIS IS THE FOOTER</h1>
     </div>
 </body>
 </html>

如何在图像上制作div

2 个答案: