Question

我正在我的投资组合网站上工作，并且难以让我的div一起调整大小。

这里是：我有一个身体div，里面有两个孩子div。

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

使用花车很难建立可靠的界面。

它改变了默认行为，并将你的元素置于通量之外。

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

属性box-sizing: border-box也创造了奇迹（边距和填充更容易管理）。

此外，目前使用的浏览器不支持对象适配属性恕我直言。 http://caniuse.com/#feat=object-fit

儿童div不适合父母

1 个答案: