CSS：如何將框放入列中

-1

我試圖用CSS替換索引頁上的兩列表。要查看我目前的索引頁面，它在http://www.negative-g.com。CSS：如何將框放入列中

我有我的專欄設置。實際上，我使用三列布局，第三個佈局是爲我的側邊欄圖像，而另外兩個佈局我想要有圖像和文本交替的框（基本上沒有使用表的表格）（公園徽標及其在文本中的名稱/位置在下面排列在另一列的那些）。我需要將哪些代碼添加到每列以複製我的表格佈局？

來源

2013-05-30 Paul Drabek

[我的網站或項目中的某些內容不起作用。我可以只粘貼一個鏈接嗎？]（http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste -a-link-to-it） – Antony

通常我會爲此使用一堆浮動塊。舉例來說，如果我有一個項目列表：

<ul> 
    <li>Foo</li> 
    <li>Bar</li> 
    <li>Baz</li> 
    <li>Quux</li> 
</ul>

我可以設置在li元件的尺寸，使他們的塊，並把它們飄浮（刪除所有邊距和填充後）左：

li { 
    display: block; 
    width: 100px; 
    height: 50px; 
    float: left; 
}

如果他們只有200px的空間，那麼他們會環繞。 Try it.

如果將寬度設置爲50％，you'll get a two-column layout。去除高度，設計室內風格，你很好走。

這並不考慮您的側邊欄，但您的側邊欄並不是真正屬於列表的一部分，而且您似乎將其作爲背景進行處理，因此不應該有任何需求特別。如果你想確保列表不重疊，你可以在列表中設置一個margin-right，它不會在那裏。

來源

2013-05-30 03:56:31 icktoofay

好吧，這可能是一個簡單的問題，但我不完全得到CSS，我所做的一切都是瘋狂的嘗試和錯誤。所以你所說的是拋棄兩個列布局（忽略背景是第三個佈局） - 兩列名稱/標識並將它們浮動爲塊。那麼，如果瀏覽器窗口很寬，連續有兩個以上，並且如果它較小，它會像換行一樣縮小？謝謝你的幫助。 –

D'oh看了一遍你寫的內容，它是一列，爲列設置了正確的邊距，使其始終具有足夠的空間容納我的圖像，然後將圖像設置爲背景圖像。 –

@PaulDrabek：當涉及到頁面的其他部分時，您可以將過山車列表視爲一列。我的回答解決了如何使列表中的項目分成兩列。 – icktoofay

CSS：如何將框放入列中

回答

相關問題