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

Question

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

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

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

如何 inner-right 使其与 inner-left 保持在同一条线上，并且在 window 调整大小的情况下，调整大小而不是缩小？

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

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

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

JSFIDDLE

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

Answer 2

为此，您应该使用 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 3

好吧，只需从 .inner-right 中删除 float: right，您的问题就会得到解决。

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

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

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

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

Floating divs inside inline-block parent goes down on resize

html

css

css-float

responsive-design