在父级内浮动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;
    }

我说＆＃34;有点＆＃34;是因为它最初工作得很好，但现在浮动的div出现在父div之上和之外。有趣的是，如果我用开发工具检查问题并取消选中并重新检查＆＃34;浮动＆＃34;无论哪一个都回到我希望他们去的地方......

Answer 1

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

希望这会有所帮助。

Answer 2

您应该使用position: absolute;进行“浮动”游戏。元素而不是float。

您需要将position: relative;添加到父换行元素 - 这将告诉孩子们尊重这个元素的边界而不是漂浮在它之外的某个地方。然后，您可以将position: absolute;添加到要浮动的每个子项，并使用top, bottom, left, right来控制该框所在的位置。尝试使用不同的值来获取它。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;