不带固定宽度的父级内部的浮动div

Question

我有一组不同大小的div，取决于其中的图像。每个DIV我想两个div的里面，一个是浮动左侧，另一种是浮动的权利，就像这样：

我有点这种方式来完成它... HTML：

<div class="image-wrap"> 
    <a href="/shop/{{ link }}"><img src="{{ img }}"></a> 
    <div class="lookbook-title"><h5 >{{ title }}</h5></div> 
    <div class="item-buy">{{ theme:partial src="_buynow" }}</div> 
</div> 

和css ：

div.image-wrap { 
    max-height: 1000px; 
    max-width: 100%; 
    border: 0; 
    display: inline-block; 
    height: auto; 
    box-sizing: border-box; 
    } 

.lookbook-title { 
    position: relative; 
    top: -36px; 
    float: left; 
    padding-left: 10px; 
    padding-right: 10px; 
    color: #f7f7f7; 
    } 

.item-buy { 
    position: relative; 
    top: -56px; 
    float: right; 
    padding-right: 20px; 
    pointer-events: none; 
    -webkit-font-smoothing: antialiased; 
    fill: #f7f7f7; 
    } 

我之所以说“之类的”，是因为它最初是工作得很好，但现在的浮动的div的上面和他们的父母以外的div上出现。有趣的是，如果我使用开发工具检查问题并取消选中并重新检查任一div上的“float”，则返回到我希望它们去的地方...

Answer 1

您需要清除浮动块。 这是一篇有趣的文章，详细解释它：http://css-tricks.com/snippets/css/clear-fix/

希望这有助于。

Answer 2

您应该使用position: absolute;作为'浮动'元素，而不是float。

您需要将position: relative;添加到父包装元素 - 这将告诉孩子尊重此元素的边界，而不是在其外部的某个位置浮动。然后，您可以将position: absolute;添加到您想浮动的每个孩子，并使用top, bottom, left, right来控制该盒子的位置。尝试使用不同的值来获得它的挂起。

div.image-wrap { 
 
    height: 300px; 
 
    width: 400px; 
 
    position: relative; 
 
    border: 1px solid red; 
 
} 
 

 
.lookbook-title, 
 
.item-buy { 
 
    background: white; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.lookbook-title { 
 
    border: 1px solid lime; 
 
    left: 10px; 
 
} 
 

 
.item-buy { 
 
    border: 1px solid blue; 
 
    right: 10px; 
 
}

<div class="image-wrap"> 
 
    <a href="/shop/"><img src="http://www.placehold.it/400x300.jpg"></a> 
 
    <div class="lookbook-title"><h5>Div 1</h5></div> 
 
    <div class="item-buy">Div 2</div> 
 
</div>