плавающие divs внутри родителя без фиксированной ширины

Question

У меня есть набор divs, которые различаются по размеру в зависимости от изображения внутри него. Внутри каждого 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; 
    } 

Поэтому я говорю «вроде», потому что он изначально работал просто отлично, но теперь плавали дивы появляются на выше и вне их родительских дивы. Интересно, что если я осматриваю проблему с инструментами dev и сниму и перепроверяю «float» на любом div, вернитесь туда, где я хочу, чтобы они ...

Answer 1

Вам нужно очистить ваши поплавки. Вот интересная статья, которая объясняет это подробно: http://css-tricks.com/snippets/css/clear-fix/

Надеюсь, это поможет.

Answer 2

Вы должны использовать position: absolute; для ваших «плавающих» элементов вместо float.

Вам нужно будет добавить position: relative; в родительский элемент wrap - это позволит детям уважать границы этого элемента, а не плавать где-то за его пределами. Затем вы можете добавить 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>