CSS使2列內容區域

我想離開使用表格來形成我的內容的佈局，我可以想到兩個替代品，我想更好地學習：（1）樣式列表項目並排放置，（2）使用浮動在同一條線上的div塊。這兩種方法都會有我自己的用途。CSS使2列內容區域

我已經使用div標籤來形成我的三列模板的整個佈局，但我現在需要做的是有點不同。如果有幫助，我的項目可以找到here。

總之，這是我的問題;我如何設計一個div的寬度，使其寬度爲所佔區域寬度的50％，而不是頁面寬度的50％？

至於我的另一個問題，將樣式列表項目，以便他們並排最好的方法是什麼？我現在正在使用註冊腳本，而不是使用左側的「用戶名」和右側的輸入文本表，我可以使用兩個列表項。

現在已經很晚了，我一直在爲我的這個項目工作了大約8個小時，所以我很抱歉如果我問任何混淆。隨意問我關於我想要做什麼的任何問題。

謝謝，朋友。 :)

來源

2010-05-08 Joe Majewski

非常感謝你們。我從來沒有理解，一個百分比寬度是由它已經包含在其中的元素的當前寬度決定的。而960.gs網站非常方便;書籤。 :) 這些信息正是我所需要的。 – 2010-05-08 09:19:33

當您使用百分比單位表示寬度和高度時，它與第一個已定義寬度或高度的祖先元素相關。因此，所有你需要做的是建立一個div是一樣寬的兩米欄：

<div class="columnContainer"> 
    <div class="column"> 
     Column 1 
    </div> 
    <div class="column"> 
     Column 2 
    </div> 
</div> 

.columnContainer { 
    width: 800px; 
} 
.column { 
    float: left; 
    width: 50%; 
}

還有很多更擺弄不僅僅是上面的代碼需要的，但是這是基礎。正如Gabriel所說，使用CSS框架可能會帶來很多價值，如960.gs

來源

2010-05-08 09:06:26 nickf

好的，所以爲了幫助你最好我將指向你http://960.gs這是一個偉大的工具原型這種情況下，並獲得可靠的代碼。在您的實際問題，你可能要設置：

width: 50%; 
float: left; 
display: block;

你想要分割的元素

。祝你好運。

來源

2010-05-08 09:02:49 Gabriel

雖然在框架上，我還建議http://www.blueprintcss.org/ – 2010-05-08 09:16:19

對於寬度，任何相對大小都是相對於父項的大小，因此將其作爲子項放入要成爲其中一半的元素內。對於列表項目...使用display: inline;或float: left;

來源

2010-05-08 09:03:43

內聯列表很簡單，但有一些缺點，例如不能設置高度或寬度。

ul li { 
    display:inline; 
}

如果你需要阻止就需要浮動的列表項和浮動可能是乏味的，有時，例如，你需要採取清除[uod]l元素的保健元素。

ul { 
    overflow:hidden; 
} 
ul li { 
    float:left; 
    display:block; 
}

在這兩種情況下，您可能都希望刪除列表本身的邊距和填充。

ul { 
    margin:0; 
    padding:0; 
}

來源

2010-05-08 09:14:46

CSS使2列內容區域

回答

相關問題