基于1st

Question

我试图找到一个合适的解决方案来堆叠不同的高度div。尝试网格，flex和最后内联块。

据我所知，第3个div（按钮）被附加到第2个div（图像）的底部。我试图这样做，它会被附加到第一个div（文本）的底部。

正在绘制按钮作为第3个div是因为当窗口尺寸变得太小时按钮必须位于图像下方。你能用内联块实现这个吗？

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要做的就是将您的图像正确浮动 - 下面我已经评论了我添加的行。我还添加了一个明确的修复并更改了按钮包装的宽度，因此它适用于较小的屏幕尺寸。

#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

你可以使用网格 - 它非常简单，只需要媒体查询等就可以控制位置和网格布局。当你学习如何正确使用网格时，它需要的CSS要少得多。

要了解flexbox，我建议使用此来源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 同样，要学习CSS网格，还有：https://css-tricks.com/snippets/css/complete-guide-grid/

您需要大约一天的时间，并且您将很好地掌握网格和Flexbox的工作原理，帮助您在未来创建更好的设计。

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;