響應式佈局 - 導航元素定位

我剛開始使用響應式佈局，並且有一個與導航元素相關的特定問題。響應式佈局 - 導航元素定位

如果我有這樣的代碼塊：

<nav> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 
</nav> 
<nav> 
    <ul> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
    </ul> 
</nav>

當觀看這樣的高分辨率計算機屏幕上我們將有由資產淨值創建一個2×3格。也就是說，每個導航將在其自己的「行」上，每個導航的所有三個元素將在彼此的右側或左側。

一個負責任的佈局，如果窗口的大小顯著縮水，比如說，到iPhone的分辨率，假設正確的比例，將導航元素笨拙改變，使這一觀點看起來是這樣的：

<nav> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
    </ul> 
</nav> 
<nav> 
    <ul> 
     <li>3</li> 
    </ul> 
</nav> 
<nav> 
    <ul> 
     <li>4</li> 
     <li>5</li> 
    </ul> 
</nav> 
<nav> 
    <ul> 
     <li>6</li> 
    </ul> 
</nav>

我只是在尋找高層次的理解這種新的佈局實踐如何專爲導航元素工作。我希望爲我正在創建的網站創建類似的內容，但是如果發生這種情況，我希望創建代碼，使得我可以在高分辨率下獲得該2x3矩陣，在較低分辨率下獲得3x2矩陣，然後轉換爲6x1極小的分辨率。

如果是這樣的話，有沒有指定的方式，爲特定的屏幕分辨率，不同的HTML？我知道我們可以爲不同的分辨率指定特定的CSS，但在這種情況下，我不確定更改CSS會做我所需要的。

來源

2012-11-27 Shawn Taylor

你應該保持一個'導航'和一個'ul'。然後漂浮和適當調整你的目標通過CSS的分辨率。例如，在1x6中，您不會將它們全部浮起，而是可能會應用100％的寬度以允許它們堆疊在一起。 – Jrod

從您的描述中我瞭解到，您的ul s有塊顯示，而li s有內聯顯示。這會導致nav/ul周圍有一個矩形塊，從而避免發生2x3佈局。正如Jrod在評論中指出的那樣，你真正想要的是一個矩形塊，它包裹着你所有的物品，並讓瀏覽器安排它們。

您可以通過將所有lis放在一起，或者通過將ul和nav顯示屬性更改爲內聯來實現此目的，同時在兩個導航欄中放置容器以確保它們最終按塊分組。

div.container { display: block; } 
nav, ul, li { display: inline; }

注意，此解決方案還可以創建兩個空電池4×2格，所以一定要限制外塊的三李寬度：

li { width: 150px; /* or whatever */ } 
div.container { max-width: 450px; /* three lis at most */ }

來源

2012-11-27 21:00:14 djjeck

響應式佈局 - 導航元素定位

回答

相關問題