html - div 中图像旁边的文本，它根据图像的高度改变高度

Question

希望标题不会太困惑。我正在尝试并排放置图像和文本。这两个都在 div 中，我想根据图像的高度更改其高度。我尝试了很多事情，但我无法做我想做的事。有时图像位于 div 下方；有时文字在图像旁边，但它们之间有很大的差距；有时文本位于图像下方，例如底部的 JSFiddle 演示。也许这真的很简单，我只是没有得到。无论如何，这是代码。 (在弄乱了一些之后，我什至不知道它应该在那里或不在那里。)

HTML

  <div class="info">
    <h2>Example</h2>
    <div class="photo">
      <img src="https://placeholdit.imgix.net/~text?&w=500&h=700">
    </div>
    <div class="desc">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "</p>
    </div>
  </div>

CSS

    .info {
      background-color: #FFFFFF;
      margin-top: 2%;
      padding: 2% 4%;
      box-shadow: 0 3px 5px #808080;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

    .info .photo {
      overflow: auto;
    }

    .info img {
      width: 30%;
    }

    .info desc {
      width: 70%;
      float: left;
    }

JSFiddle 演示

https://jsfiddle.net/dw812685/1/

谢谢!

Answer 1

使用您的 float 布局，我将以这种方式构建它。

float 左侧/右侧的容器，并将图像设置为max-width: 100%。还要确保在 float 元素的父级上使用某种 clearfix。

.info {
  background-color: #FFFFFF;
  margin-top: 2%;
  padding: 2% 4%;
  box-shadow: 0 3px 5px #808080;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: auto;
}

.info .photo {
  float: left;
  width: 30%;
  margin: 0 1% 0 0;
}

.info img {
  max-width: 100%;
}

.info .desc {
  width: 69%;
  float: left;
}

<div class="info">
  <h2>Example</h2>
  <div class="photo">
    <img src="https://placeholdit.imgix.net/~text?&w=500&h=700">
  </div>
  <div class="desc">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "</p>
  </div>
</div>

您也可以使用 flexbox，设置 .photo 的 flex-basis 并将文本区域设置为 flex-grow(或 flex: 1 0 0 简称)

.info {
  display: flex;
  flex-wrap: wrap;
  background-color: #FFFFFF;
  margin-top: 2%;
  padding: 2% 4%;
  box-shadow: 0 3px 5px #808080;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

h2 {
  flex: 0 0 100%;
}

.info .photo {
  flex: 0 0 30%;
  margin-right: 1em;
}

.info img {
  max-width: 100%;
}

.info .desc {
  flex: 1 0 0;
}

<div class="info">
  <h2>Example</h2>
  <div class="photo">
    <img src="https://placeholdit.imgix.net/~text?&w=500&h=700">
  </div>
  <div class="desc">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "</p>
  </div>
</div>