Question

我有两个我漂浮的div。一个是背景。另一个是一些文字。

我希望文本浮动在我放置的背景图像上。在此之前我已经让它与我的所有其他背景一起工作了，但是对于这个具体来说，它似乎只是将内容随机地推到它下面并使我的页脚浮动在它旁边。

这是一个小提琴，所以你可以得到一个想法：http://jsfiddle.net/d78sdjm4/2/

绿色（.contact_text）应该位于红色div（.mebg）的中心或至少位于红色div（.mebg）之上。然后黑色（.footer）应该直接位于两者之下。

HTML：的的

的
<div class="contactwrapper"> <div class="contact"> <p>please work</p> </div> <div class="mebg"> <img src="images/contactnew.png" /> </div> </div>  <div class="footer"> <img src="images/footer.png" width="239" height="15" /> </div>

的 CSS：的的

的
.contactwrapper{ width:100%; position:relative; } .contact{ float:left; background:#0F3; } .mebg{ float:left; width:100%; background:#900; } mebg img{ width:30%; } .footer{ z-index: 1; height: 30px; background-color: #ffffff; }

的

Answer 1

我不得不做一些调整，但是这可以让它在红色div的顶部有绿色div并且将页脚保持在底部：

.contactwrapper{
    width:100%;
    position:relative;
}
.contact{
    float:left;
    background:#0F3;
    position: absolute;   /* .contact needs absolute positioning */
}
.mebg{
    float:left;
    width:100%;
    background:#900;
    height:200px;
}
mebg img{
    width:30%;
}
.footer{
    z-index: 1;
    height: 30px;
    clear: both;       /* clear: both will bring the footer below the other divs */
    background-color: #000;
}

Answer 2

您可以在红色分区mebg内移动注释div：

<div class="contactwrapper">
    <div class="mebg">
        <img src="images/contactnew.png" />
        <div class="contact">
             <p>please work</p>
        </div>
    </div>
</div>
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------>
<div class="footer">
<img src="images/footer.png" width="239" height="15" /> 
</div><!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

按照其他答案中的详细说明添加clear:both，这应该可以（或至少看起来）像你想要的那样。

请参阅此jsfiddle以获取示例。

编辑：我发现CSS positioning上的此链接很有帮助。我认为它解释得非常清楚。

Answer 3

您可以将clear: both;添加到.footer { }以获得另外两个下方的黑条。同时浮动宽度为100％的元素通常不会产生您想要的结果。它可能是浮动的，但由于宽度为100％，所以一切都被推后。

Answer 4

由于您已经为position设置relative为contactwrapper，为什么不放弃float并只使用absolute定位？

以下是您的代码作为基础的示例。请注意，我删除了许多不必要的样式。

.contactwrapper {
  position: relative;
}
.contact {
  background: #0F3;
  position: absolute;
  left: 0;
  right: 0;
}
.mebg {
  background: #900;
  height: 200px;
}
.footer {
  height: 30px;
  background-color: #000;
}

/* To look pretty: Hide overflow of the stock images */
.mebg,
.footer {
  overflow: hidden;
}

<div class="contactwrapper">
  <div class="contact">
    <p>please work</p>
  </div>
  <div class="mebg">
    <img src="http://www.lorempixel.com/700/200" />
  </div>
</div>
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------>
<div class="footer">
  <img src="http://www.lorempixel.com/700/15" />
</div>
<!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

Answer 5

这是小提琴https://jsfiddle.net/rphsjt1q/1/

.contactwrapper{
	width:100%;
	position:relative;
    overflow:auto;
}
.contact{
	position:absolute;
	background:#0F3;
    left:0;
    right:0;
    bottom:0;
    top:0;
    width:100px;
    height:100px;
    margin:auto;
    text-align:center;
    z-index:1;
    
}
.mebg{
	float:left;
	width:100%;
	background:#900;
    height:200px;
}
mebg img{
	width:30%;
}
.footer{
	z-index: 1;
	height: 30px;
	background-color: #000;
    width:100%;
    display:block;
}

<div class="contactwrapper">
    <div class="contact">
     <p>please work</p>
    </div>
    <div class="mebg">
    	<img src="images/contactnew.png" />
    </div>
</div>
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------>
<div class="footer">
<img src="images/footer.png" width="239" height="15" /> 
</div><!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

Div不会漂浮在其他div

5 个答案: