顶部div显示在底部和底部到顶部

Question

我的 HTML 结构首先显示一个段落，然后显示底部的图形。使用 CSS ，我想在顶部显示图形，在底部显示段落。该段落将是动态的，因此高度不固定。我无法弄清楚如何解决这个问题。

这是我的代码：

.centerDiv {
  width: 500px;
  margin: 0 auto;
}

.topDiv {
  display: inline-block;
  width: 460px;
  vertical-align: top;
}

.bottomDiv {
  display: inline-block;
  width: 460px;
  height: 100px;
  background-color: #ff0000;
  vertical-align: top;
}

<div class="centerDiv">
  <div>
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
      nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
    <div class="bottomDiv">Graphic</div>
  </div>
</div>

Answer 1

如果Graphic具有固定高度，您可以使用定位

来实现

见下面的代码

＆＃13;

＆＃13;

.centerDiv {
  width: 500px;
  margin: 0 auto;
}


/* added code */
.centerDiv>div {
  position: relative;
  padding-top: 100px; /* padding value equals to bottomDiv's height*/
}
/*---------------*/

.topDiv {
  display: inline-block;
  width: 460px;
}

.bottomDiv {
  display: inline-block;
  width: 460px;
  height: 100px;
  background-color: #ff0000;
  
  /* added code */
  position: absolute;
  top: 0;
  left: 0;
  /*---------*/
}

＆＃13;

<div class="centerDiv">
  <div>
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
      nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
    <div class="bottomDiv">Graphic</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以使用flex-direction: column-reverse;来反转div子女的顺序

  

但某些浏览器可能不支持此功能

＆＃13;

＆＃13;

.centerDiv {
  width: 500px;
  margin: 0 auto;
}

.centerDiv>div {
  display: flex;
  flex-direction: column-reverse;
}

.topDiv {
  display: inline-block;
  width: 460px;
}

.bottomDiv {
  display: inline-block;
  width: 460px;
  height: 100px;
  background-color: #ff0000;
}

＆＃13;

<div class="centerDiv">
  <div>
    <div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
      nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
    <div class="bottomDiv">Graphic</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;