如何水平劃分網頁？

我正在學習HTML。我正在閱讀書中的<div>標籤。我瞭解它是如何將網站分成垂直片段，但我也看到了人們在邊欄上使用<div>標籤的示例。 <div>標籤如何水平工作？如何水平劃分網頁？

2011-06-29 Fahad Uddin

請將HTML標籤包裝在反引號（'）中。 – SLaks

對不起。正在編輯它，但感謝Jared。他在我之前做過:) –

如果你還沒有閱讀[box model]（http://www.w3.org/TR/CSS2/box.html）。 –

要讓它們如此並排，您需要使用CSS。默認情況下div元素的display屬性設置爲block。因此，它後面的元素通常會出現在下面。

要設置幾個欄目可以說你具備以下條件：

<div class="container"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div>

您可以設置列通過應用CSS規則的類：

<style type="text/css"> 
    .container { 
     width:500px; 
    } 
    .left { 
     width:250px; 
     float:left; 
    } 
    .right { 
     width:250px; 
     float:right; 
    } 
</style>

總之，即時給它一個容器具有最大寬度。這不是必需的，但通常是這樣做的。然後我將這兩個div設置爲容器寬度的一半，然後將浮動放在它上面。所以所有的元素都會粘在它旁邊。浮動權是可選的。但是，如果將容器製作得更寬一些，則右側的div將粘在右側。

來源

2011-06-29 01:33:52 agmcleod

http://jsfiddle.net/Buyar/ –

再次感謝賈裏德:) –

我需要記住有時使用該網站:)。只需要添加，如果你拿出容器div，兩個中間div將使用全寬。所以右側會出現在屏幕的最右側。 – agmcleod

它被認爲是塊元素，寬度爲100％。

我建議你在文本編輯器&中通過添加背景色和其中的一些內容來嘗試它。

來源

2011-06-29 01:30:22 bchhun

如何水平劃分網頁？

回答

相關問題