内联块父级中的浮动 div 在调整大小时下降

Question

我有 2 个浮动 div，inner-left 和 inner-right 在父容器 inner-container 内。

inner-container 设置为 display: inline-block; 使其宽度等于其子项的宽度。

问题是，当我调整窗口大小时，inner-right div 下降，然后才开始调整自身大小。

我如何inner-right 使其与inner-left 保持在同一行，并且在调整窗口大小的情况下调整大小而不是缩小？

HTML：

<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <div class="inner-container">
        <div class="inner-left"><img src="http://placehold.it/100x100" alt=""></div>
        <div class="inner-right"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo orci, rutrum nec feugiat sed, ultrices non dolor. Aliquam laoreet.</strong><br>
    Vivamus purus metus.
        </div>
    </div>
</div>

CSS：

.container {
    background-color: #f0fff0;
    padding: 10px;
    border: 1px solid #bce2c1;
    border-radius: 5px;
}

.inner-container {
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #bce2c1;
    border-radius: 5px;
    margin-top: 10px;
    display: inline-block;
}

.inner-left {
    float:left;
    width: 60px;
}

.inner-left img {
    height: 60px;
    width: 60px;
}

.inner-right {
    float:right;
    text-align: left;
    padding-left: 10px;
}

JSFIDDLE：

https://jsfiddle.net/acidonyx/naw6ojwe/4/

Answer 1

为此，您应该使用flexbox，这里使用inline-flex 来满足您的要求

.container {
  display: inline-block;
  background-color: #f0fff0;
  padding: 10px;
  border: 1px solid #bce2c1;
  border-radius: 5px;
}
.inner-container {
  display: inline-flex;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #bce2c1;
  border-radius: 5px;
  margin-top: 10px;
}
.inner-left img {
  height: 60px;
  width: 60px;
}
.inner-right {
  padding-left: 10px;
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <div class="wrap-container">
    <div class="inner-container">

      <div class="inner-left">
        <img src="http://placehold.it/100x100" alt="">
      </div>

      <div class="inner-right"><strong>Lorem ipsum dolor sit</strong>
        <br>Vivamus purus metus.
      </div>

    </div>
  </div>
</div>

Answer 2

只需从.inner-right 中删除float: right 即可解决您的问题。

.inner-right {
    text-align: left;
    padding-left: 10px;
}

---

要解决您的其他问题，您可以这样做

.inner-right {
    overflow: hidden;
    text-align: left;
    padding-left: 10px;
}

Answer 3

您可以尝试将.inner-right 浮动到左侧，并以百分比值设置宽度，如下所示：

.inner-right {
    float:left;
    width: 85%;
}

JSFIDDLE

您可以根据需要使用媒体查询来更新百分比。