Question

我在父容器inner-left中有2个浮动div，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符合您的要求

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需从float: right删除.inner-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

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

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

3 个答案: