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

使用你的浮动布局，我会用这种方式构建它。

浮动左/右侧的容器，并将图像设置为max-width: 100%。还要确保在浮动元素的父元素上使用某种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，设置flex-basis的{{1}}并将文字区域设置为.photo（或简称为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内图像旁边的文本，根据图像的高度更改高度

1 个答案: