CSS 第三 div 高度基于第一

Question

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

据我了解，第 3 个 div（按钮）附在第 2 个 div（图像）的底部。我正在尝试将其附加到第一个 div(text) 的底部。

按钮被绘制为第 3 个 div 是因为当 window 尺寸太小时按钮必须位于图像下方。你甚至可以用内联块实现这个吗？

我当前的代码： 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 的工作原理，帮助您在未来创建更好的设计。

对于当前示例，请参阅 fiddle 和 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>

CSS 第三 div 高度基于第一

CSS 3rd div height based on 1st

css

flexbox

reactjs

css-grid