html - 子 div 不适合父级

Question

我正在处理我的投资组合网站，但在调整我的 div 大小时遇到​​了问题。

它是这样的:我有一个 body div，里面有两个子 div。

body div 应该有 max-height 100%, max-width: 100% 这样它就不会超出浏览器窗口。

左边的 div 包含一个图像，我想将其缩放到父主体 div(max-height 100%，max-width 70%)。

右边的 div 包含关于图像的文本，它需要缩放到左边 div 的高度(还有位于该 div 底部的页脚)。

这不应该那么难，它几乎可以工作，但现在我的图像容器(左 div)没有包含在 body div 中。

html,
body {
  height: 100%;
}
.Info {
  float: left;
  width: 25%;
  padding-left: 15px;
  padding-top: 10px;
  /*margin-left: 78%;*/
  border-left: 1px black solid;
  /*position: absolute;*/
}
.InfoText p {
  margin-top: -10px;
}
div img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  box-shadow: 5px 5px 15px #888888;
}
.ImageContainer {
  float: left;
  height: 100%;
  max-width: 70%;
  padding-right: 15px;
  position: relative
}
section.ImageContainer img {
  float: left;
  object-fit: cover;
}
#SideQuote {
  margin-top: 30px;
}
.StuffInBody {
  position: relative;
  padding-top: 15px;
  float: left;
  display: flex;
}
footer p {
  position: absolute;
  bottom: 0%;
  margin: 0;
}

<div class="StuffInBody">

  <div class="ImageContainer">
    <img class="contained" src="images/TheGMODebate copy.jpg" alt="" />
  </div>

  <div class="Info">
    <div class="InfoText">
      <p>ILLUSTRATION</p>
      <p>Title: <em>The GMO Debate</em>
      </p>
      <p>Media: Gouache</p>
      <div id="SideQuote">
        <p class="ClickToEnlarge">Full screen image click<a href="images/TheGMODebate copy.jpg" target="_blank"> here.</a>
        </p>
      </div>
      <footer>
        <p>&copy; Brooke Weiland 2015</p>
      </footer>
    </div>
  </div>
</div>

Answer 1

很难使用 float 制作可靠的界面。

它会更改默认行为并将您的元素置于通量之外。

你应该能够只使用 flex 做你想做的事。

属性 box-sizing: border-box 也创造了奇迹(margin 和 padding 更容易管理)。

另外，object-fit 属性还没有得到足够的浏览器支持，现在恕我直言。 http://caniuse.com/#feat=object-fit