浮动离开div不占用所有宽度

Question

我有以下片段，我希望侧文本div放在图像的右侧，但除非我指定这个侧文div的with，它会自动移动到底部（因为它现在是）

我尝试使用display:inline-block显示元素，但是旁边文本div与图像底部对齐。

https://jsfiddle.net/f0jheskv/

＆＃13;

＆＃13;

.content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.text {
  padding: 10px;
  background-color: rgb(150, 150, 150)
}
.code {
  padding: 10px;
  background-color: rgb(200, 200, 200)
}
.side-text {
  background-color: rgb(200, 100, 100)
}
.img-strip {
  width: 100%
}
.img-strip img,
.img-strip div {
  float: left
}
.clear {
  clear: both
}

＆＃13;

<div class="content">
  <h3>
  Title
  </h3>

  <div class="text">
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó
    una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
  </div>

  <div class="img-strip">
    <img width="320px" height="240px" />
    <div class="side-text">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido
      usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</div>
  </div>
  <div class="clear"></div>

  <div class="code">
    <pre>
  for(int i=0; i<9; i++){
    a=0;
    b=3;
  }
    </pre>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将div设置为所需的宽度，然后在display:flex;容器上使用.img-strip。这样，div高度被放大到图像高度。 Here is a great tutorial关于flex属性。

＆＃13;

＆＃13;

.content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.text {
  padding: 10px;
  background-color: rgb(150, 150, 150);
}
.code {
  padding: 10px;
  background-color: rgb(200, 200, 200);
}
.side-text {
  background-color: rgb(200, 100, 100);
  float: right;
  flex: 1;
}
.img-strip {
  width: 100%;
  display: flex;
}
.img-strip img {
  float: left;
}
.clear {
  clear: both;
}

＆＃13;

<div class="content">
  <h3>
  Title
  </h3>

  <div class="text">
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó
    una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
  </div>

  <div class="img-strip">
    <img width="320px" height="240px" />
    <div class="side-text">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido
      usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</div>
  </div>
  <div class="clear"></div>

  <div class="code">
    <pre>
  for(int i=0; i<9; i++){
    a=0;
    b=3;
  }
    </pre>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;