Question

这是布局

<div id="wrapper">
  <div id="div1">
    <span> Hello</span>
  </div>
  <div id="div2">
  <span> Content in this box should be pushed to the top as you reduce page size</span>
  </div>
</div>

我有两个div div1和div2包装在一个包装器中。包装器应该在窗口的左下角进行压缩。当用户调整其窗口大小时，我希望div 2中的文本溢出顶部而不是默认移动文本下一行（向下）我想要文本移动到上一行（向上）并且基本上推动你好在div 1向上。

基本上反过来将顶部div叠加到顶部并在屏幕调整大小时按下内容。

虚线是窗口底部的图像，那么我会想要这样的行为

  Hello
  Content in this box
  should be pushed to
  the top as you reduce
  page size
  ---------------------

然而，目前div遵循将过度文本发送到下一行的正常行为，如此（我不想要的行为）

   Hello
   Content in this box should
   ------------------------
   be pushed to the top as you
   reduce page size

Answer 1

这样的东西？ https://jsfiddle.net/tuk50ooy/

#wrapper{bottom:0;position:absolute;}
@media only screen and (max-width : 480px) {
  #wrapper{position:relative;}
}

<div id="wrapper">
  <div id="div1">
    <span> Hello</span>
  </div>
  <div id="div2">
  <span> Content in this box should be pushed to the top as you reduce page size</span>
  </div>
</div>

Answer 2

如果我理解正确，这应该是绝对定位包装器中的默认行为。请全屏查看JSFiddle或摘录：

＆＃13;

#wrapper {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 50%;
  background: orange;
  padding: 5px;
}

＆＃13;

<div id="wrapper">
  <div id="div1">
    <span> Hello</span>
  </div>
  <div id="div2">
  <span> Content in this box should be pushed to the top as you reduce page size</span>
  </div>
</div>

＆＃13;

将div叠加在一起，文字溢出到顶部

2 个答案: