HTML如何在內容中連續標記4個面板

我在HTML上很糟糕，因此在重新創建以下內容時尋求一些幫助。我可以用桌子來做，但明白現在這是一個禁忌。所以建議是必要的。HTML如何在內容中連續標記4個面板

alt text http://img130.imageshack.us/img130/8623/4panel.jpg

我所希望實現的是四個固定大小的盒子，然後在頁面上散佈單行。這些盒子裏面會有一些信息，可能是文字，可能是圖像，也可能是兩者。

這些框將是靜態大小，即我不希望它們調整大小以適應瀏覽器窗口的寬度。我猜它可能會用div標籤完成，但我沒有第一個線索從哪裏開始。

來源

2009-12-02 Martin

說表是一個禁忌是有點過於簡單化。除非你想讓一羣人興奮起來。 ;） – AnonJr 2009-12-02 14:29:29

Eek那不是我的意圖 - 我剛剛讀過那些表格只能用於表格數據。 – Martin 2009-12-02 14:59:23

你想是這樣的（未測試）

<div id="wrapper"> 

    <div id="box1" class="box"> 
    <!-- your content here --> 
    </div> 

    <div id="box2" class="box"> 
    <!-- your content here --> 
    </div> 

    <div id="box3" class="box"> 
    <!-- your content here --> 
    </div> 

    <div id="box4" class="box"> 
    <!-- your content here --> 
    </div> 

</div>

與CSS

.box{ 
    width: 200px; 
    margin-left: 20px; 
    float: left; 
} 

#box1{ 
    margin-left: 0; 
} 

#wrapper{ 
    margin: 0 auto; // Center on the page 
    width: 860px; 
}

來源

2009-12-02 14:23:35

這就是很多'id'和'class'屬性;特別是考慮到（在你的例子中）'＃wrapper'是你真正需要的唯一一個。 – 2009-12-02 14:24:53

我用皮帶和括號擴展了極簡主義。你可以刪除不需要的標記，但正如馬丁說他的HTML不好，我想我會說清楚。額外的box1，bax2 Id可以讓你將更多的樣式指向每個盒子，例如，給每個盒子一個不同的背景顏色。 – 2009-12-02 15:17:42

您可以使用四個固定寬度/高度的div，它們都在float:left;上設置。

<div class="box">Some content</div> 
<div class="box">More content</div> 
<div class="box">Maybe an image</div> 
<div class="box">Some content and an image</div>

這個CSS：

.box { 
    width: 200px; 
    float: left; 
}

來源

2009-12-02 14:20:42 BalusC

嗯，這不是那麼靠譜：

<div class="panelwrapper"> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
</div>

這真的是所有的HTML，如果您需要。

來源

2009-12-02 14:22:08

額外div用於保持面板框居中，以及按邏輯分組。但是，你可以沒有它（雖然你將不得不添加類到div）。 – 2009-12-02 14:23:18

我很難解決我需要的Panelwrapper的CSS。 – Martin 2009-12-02 14:44:41

HTML如何在內容中連續標記4個面板

回答

相關問題