不帶固定寬度的父級內部的浮動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>