CSS 3rd div 高度基于 1st

Question

我正在尝试为堆叠不同高度的 div 找到正确的解决方案。尝试了 grid、flex 和 inline-block。

据我了解，第三个 div（按钮）附加到第二个 div（图像）的底部。我正在尝试将其附加到第一个 div（文本）的底部。

按钮被绘制为第 3 个 div 是因为当窗口尺寸变得太小时时，按钮必须位于图像下方。你甚至可以使用 inline-block 来实现这一点吗？

我当前的代码： https://jsfiddle.net/mep2x67L/16/

#container {
  padding-top: 50px;
  padding-bottom: 50px;
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}

#desccription {
  width: calc(50% - 20px);
  margin-left: 20px;
  display: inline-block;
  vertical-align: top;
}

#desccription_Container {
  margin: 0 auto;
  justify-content: left;
  text-align: left;
  max-width: 560px;
  margin-right: 10px;
}

#half_img {
  width: 100%;
}

#img_container {
  width: 49%;
  display: inline-block;
}

.btnWrap {
  display: inline-block;
  width: 355px;
  vertical-align: top;
  text-align: center;
}

#normal_text {
  font-size: 36px;
  line-height: 42px;
  color: #F1ECE3;
}

#btnWrap {
  display: inline-block;
  width: 355px;
  vertical-align: top;
  text-align: center;
}

<div id="container">
  <div id="desccription">
    <div id="desccription_Container">
      <div id="normal_text"> hello hello </div>
    </div>
  </div>
  <div id="img_container">
    <img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
  </div>

  <div id="btnWrap">
    <button type="button">Button!</button>
  </div>
</div>

Answer 1

您需要做的就是将您的图像 div 浮动到右下方 - 我已在下方评论了我添加的行。我还添加了一个明确的修复程序并更改了按钮环绕的宽度，使其适用于较小的屏幕尺寸。

#container {
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
  width: 100%;
  height: 100%;
}

#container:after {               /* clear fix */
  content: '';
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

#desccription {
  width: calc(50% - 20px);
  margin-left: 20px;
  display: inline-block;
  vertical-align: top;
}

#desccription_Container {
  margin: 0 auto;
  justify-content: left;
  text-align: left;
  max-width: 560px;
  margin-right: 10px;
}

#half_img {
  width: 100%;
}

#img_container {
  width: 49%;
  display: inline-block;
  float:right;                /* add this */
}

#normal_text {
  font-size: 36px;
  line-height: 42px;
  color: #F1ECE3;
}

#btnWrap {
  width: calc(50% - 20px); /* I would make this the same size as desccription */
  vertical-align: top;
  text-align: center;
}

<div id="container">
  <div id="desccription">
    <div id="desccription_Container">
      <div id="normal_text"> hello hello </div>
    </div>
  </div>
  <div id="img_container">
    <img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
  </div>

  <div id="btnWrap">
    <button type="button">Button!</button>
  </div>
</div>

Answer 2

您可以使用 Grid - 它非常简单，您可以通过媒体查询等来控制位置和网格布局。当您学习如何正确使用网格时，它需要的 CSS 更少。

要了解 flexbox，我推荐这个来源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 同样，要学习 CSS 网格，还有：https://css-tricks.com/snippets/css/complete-guide-grid/

这将花费您大约一天的时间，并且您将很好地掌握网格和 flexbox 的工作原理，从而帮助您在未来创建更好的设计。

对于当前示例，请参阅 CSS-grids 的小提琴： https://jsfiddle.net/5u69aaun/

#container {
    padding-top: 50px;
    padding-bottom: 50px;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
}


#description{
    padding-left: 20px;
    padding-right: 10px;
    grid-row: 1;
    grid-column: 1;
    text-align: left;
}

#description_Container{
    max-width: 560px;
}

#half_img {
    width: 100%;
}
#img_container {
    grid-row: 1 / 3;
    grid-column: 2;
}

.btnWrap{
    grid-row: 2;
    grid-column: 1;
}

#normal_text{
    font-size: 36px;
    line-height: 42px;
    color: red;
}

#btnWrap{
    text-align: center;
}

<div id="container">
  <div id="description">
    <div id="description_Container">
      <div id="normal_text"> hello hello </div>
    </div>
  </div>
  <div id="img_container">
   <img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg" >
  </div>
  <div id="btnWrap">
    <button type="button">Button!</button>
  </div>
</div>