在響應式視圖中對HTML元素進行重新排序

我一直在設計師的桌面設備與移動設備上遇到的一件事是對HTML元素進行重新排序。我的頁面必須在所有斷點上工作，所以文本在瀏覽器調整大小時進行環繞/擴展（因此所有事物的高度總是可變的）。在響應式視圖中對HTML元素進行重新排序

下面是一些方案：（配管表示浮子或列）

桌面：

項1 |項目2項3

手機：

項3項1項2

桌面：

利

- 內容

移動

利

- 保持的背景圖像

- 用白色BG

什麼是最好的方式（如果有的話），顯示李的背景圖像下方的內容（所以基本上LI外）使用流體佈局對各個斷點重新排序HTML元素？看起來像使用JavaScript來偵聽窗口大小是矯枉過正的，當多個元素必須重新排列時絕對定位不起作用。

如果有人知道解決方案，如果您可以將它發佈到JSFiddle上，那將是非常棒的。

來源

2013-07-12 Stevo

你有什麼試過？首先想到的是使用CSS'@ media'併爲每個項目使用類定義，然後「漂浮」並根據需要堆疊項目。 – defaultNINJA

這裏是使用float和position: absolute的組合的示例。

http://jsfiddle.net/qmWwp/

HTML

<div class="group" id="wrapper"> 
    <div class="content" id="item1">ITEM 1</div> 
    <div class="content" id="item2">ITEM 2</div> 
    <div class="content" id="item3">ITEM 3</div> 
</div>

CSS

#wrapper { 
    width: 927px; 
} 
.content { 
    text-align: center; 
    color: #ffffff; 
    background: #000000; 
    border: 5px solid red; 
    width: 300px; 
    height: 300px; 
} 
@media all and (min-width: 800px) { 
    #item1 { 
     float: left; 
    } 
    #item2 { 
     float: left; 
    } 
    #item3 { 
     float: left; 
    } 
} 
@media all and (max-width: 799px) { 
    .content { 
     position: absolute; 
    } 
    #item1 { 
     top: 8px; 
     left: 315px; 
    } 
    #item2 { 
     top: 8px; 
     left: 624px; 
    } 
    #item3 { 
     float: left; 
    } 
} 
.group:after { 
    content:""; 
    display: table; 
    clear: both; 
}

正如在其他的答案中提到，完全控制不可用float但使用position: absolute你有更多的控制權。現在，如果需要與像素保持完美的間距，現在可能會遇到問題，尤其是如果容器中有文本，因爲不同的瀏覽器會使文本略有不同，通常會將CSS由單個像素拋棄。

來源

2013-07-12 13:35:53 defaultNINJA

您需要添加破發點@media肯定，再加上你需要檢查

@media 
{ 
li:nth-child(item1) { float: ....} 
li:nth-child(item2) 
li:nth-child(item3) 
}

，或者您也可以使用jQuery動態移動div S作爲如下圖所示：

$("<li>item 1</li>").insertAfter($("classname").children()[2]);

來源

2013-07-12 13:18:36

在響應式視圖中對HTML元素進行重新排序

回答

相關問題