Question

我正在尝试使用What is the best way to move an element that's on the top to the bottom in Responsive design 重新排序移动显示的元素。我的HTML是：

<div id="container"><div id="content" role="main">
<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
<a class="home" href="http://xxx">Home</a> &#47; Aloe Vera Soothing Face Cream</nav>
  <div itemscope itemtype="http://schema.org/Product" id="product-276" class="post-276  product type-product status-publish shipping-taxable product-type-simple instock">
<div class="images">
<a href="http://xxx/uploads/2014/03/Appeal_Aloe_Vera_Soothing_Face_Cream.jpg" itemprop="image" class="woocommerce-main-image zoom" title="Appeal Aloe Vera Soothing Face Cream" data-rel="prettyPhoto">
    <img width="258" height="300" 
     src="http://xxx/wp-content/uploads/2014/03/Appeal_Aloe_Vera_Soothing_Face_Cream-258x300.jpg" 
     class="attachment-shop_single wp-post-image" 
     alt="Appeal Aloe Vera Soothing Face Cream" 
     title="Appeal Aloe Vera Soothing Face Cream" /></a>    
</div>
<div class="summary entry-summary">
    <h1 itemprop="name" class="product_title entry-title">Aloe Vera Soothing Face Cream</h1>
    </div>
</div><!-- .summary -->

我想把产品'芦荟舒缓面霜'的标题放在上面。（在HTML中，它位于图像下方）。我正在使用css

@media all and (min-width: 770px){
#content div.product{  
display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -moz-box-orient: vertical !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    /* optional */
    -webkit-box-align: start !important;
    -moz-box-align: start !important;
    -ms-flex-align: start !important;
    -webkit-align-items: flex-start !important;
    align-items: flex-start !important;
}
    #content div.product h1.product_title.entry-title{
    -webkit-box-ordinal-group: 1 !important;
        -moz-box-ordinal-group: 1 !important;
        -ms-flex-order: 1 !important;
        -webkit-order: 1 !important;
        order: 1 !important;
                    }
     #content div.product img.attachment-shop_single.wp-post-image{
     -webkit-box-ordinal-group: 2 !important;
     -moz-box-ordinal-group: 2 !important;
        -ms-flex-order: 2 !important;
        -webkit-order: 2 !important;
     order: 2 !important;
    }
}

但它不起作用。（我补充说！重要，但没有帮助）我究竟做错了什么？感谢

Answer 1

如何将父级设置为position：relative并将子项设置为position：absolute;

这可以在您现有的媒体查询中完成，因此全尺寸桌面浏览器会将其设置为默认值。

这里是JS的小提琴，您可能需要根据屏幕分辨率调整#product-276的高度，例如@media all和（min-width：770px）可能是400px或多或少在不同的断点，如@media all和（min-width：320px）

http://jsfiddle.net/YtSMT/

#container {
    border:1px solid red;
}
#product-276 {
    position:relative;
    height:400px;
}
.summary {
    border:1px solid green;
    position:absolute;
    top:0;
}
.images {
    border:1px solid purple;
    position:absolute;
    bottom:0;
}

使用css切换元素的顺序

1 个答案: