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

I have 2 floating divs, inner-left and inner-right inside parent container inner-container.

我有2个浮动div，内部左侧和内部右侧内部父容器内部容器。

inner-container is set to display: inline-block; to have it's width to be equal of width of it's children.

inner-container设置为display：inline-block;让它的宽度等于它的孩子的宽度。

The problem is, when I resize the window, inner-right div goes down and only then starts to resize itself.

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

How do I inner-right make it stay on the same line with inner-left, and, in the event of window resize, to resize instead of going down?

我如何在右内侧使其与内左侧保持在同一条线上，并且在窗口调整大小的情况下，调整大小而不是下降？

HTML:

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:

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:

的jsfiddle：

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

3 个解决方案

#1

well just remove float: right from .inner-right and your problem will be solved.

好吧，只需从.inner-right中删除float：你的问题就会解决。

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

to solve your other problem you can do

解决你可以做的其他问题

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

#2

For this you should use flexbox, here with inline-flex to fit your requirement

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

#3

You could try floating .inner-right to the left instead, and giving it a width set in a percentage value, like this:

您可以尝试浮动.inner-right到左边，并给它一个宽度设置为百分比值，如下所示：

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

JSFIDDLE

的jsfiddle

You can use media queries to update the percentage as you need.

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

#1