使用CSS切换元素位置

Question

我有2个DIV，我一直试图重新订购，如下图所示。尝试将日历移到快速链接上方以移动视图，但似乎无法正常工作。我尝试将左侧的日历和右侧的快速链接浮动，但仍然无效。关于如何实现这一点的任何想法？我对HTML和基于jQuery的建议持开放态度。

HTML

<div id="quick-links"></div><!-- End Quick links -->

<div id="calendar"></div><!-- End Calendar -->

CSS代码

    #calendar {
        float: left;
        position: relative;

         }


    #quick-links {
        float: right;
        position: relative;
}

插图图片

Answer 1

正如@Terry指出的那样，你可以使用CSS3 Flexbox。

这样你只需要改变order。实际上只需更改一个order上的div（快速链接），它就会自动切换。

这样的事情：

#container {
    width: 240px; height: 240px;
    border: 1px solid gray;
    display: flex;
    flex-direction: column; 
    /* flex-direction: column-reverse; */
    /* use column-reverse if needed to reverse the entire list */
}

#quicklinks {
    order: 2;
}

#calendar {
    order: 1;
}

.filler {
    height: 100px;
    margin: 8px;
}

#calendar .filler {
    background-color: #f00;
}
#quicklinks .filler {
    background-color: #00f;
}

<div id="container">
    <div id="quicklinks">
        <div class="filler">Quick</div>
    </div>
    <div id="calendar">
        <div class="filler">Calendar</div>
    </div>
</div>

小提琴玩：http://jsfiddle.net/abhitalks/d8r47k8q/

Answer 2

另一种方法是将display:table提供给div和display: table-header-group的父级到具有日历的元素。

与flexbox方法相比，这确保了更广泛的兼容性，因为它甚至可以在IE8

上工作

HTML

<div id="container">
  <div id="quick-links">QuickLinks</div>
  <div id="calendar">Calendar</div>
</div>

CSS

#container { display: table }
#calendar { display: table-header-group }

---

当然，您可以将display: table-footer-group分配给quicklinks元素，最终效果会相同。

示例：http://codepen.io/anon/pen/wBvrZm

Answer 3

您可以使用CSS3 @media query，但需要确定所定位的移动视图的屏幕分辨率。

<div id="container">
  <div id="quick-links">QuickLinks</div>
  <div id="calendar">Calendar</div>
</div>

@media screen and (max-width: 600px) {
  div#container{
    position: relative;
  }
  #quick-links{ /* move below #calendar*/
    position:absolute;
    top: 115px; /* this should be the height covered the calender height including its margin */
    left: 0
  }

  #calendar{ /* move atop of #quick-links */
    position:absolute;
    top: 0;
    left: 0;
  }
}

max-with: 600px表示在低于分辨率宽度600px的媒体屏幕中查看时，日历将移至#quick-links的顶部。

Answer 4

#calendar{
    top: 0px;
    position: relative;
}

#quik-linskr {
    bottom: 0px;
    position: relative;
}