CSS替換表格的表格

我看了其他問題，無法找到解決方案。考慮這個圖像：mockup http://img201.imageshack.us/img201/935/image2h.png CSS替換表格的表格

我想打包div並垂直堆疊它們。 GREEN div將成爲包裝線。 BLUE div將包含html標籤，並可能包含工具提示圖標。 ORANGE div將包含某種條目（input，select，textarea）。

其中幾個將被垂直堆疊來組成一個窗體。我現在正在這樣做，但我必須爲容器div指定一個高度，並且真正需要根據內容進行更改 - 考慮到任何條目都可能落在那裏。圖像和其他東西也可以落在這裏。

我在BLUE div上設置了一個寬度，而ORANGE是float：left。我怎樣才能擺脫divs的高度，並讓它由內容決定？有沒有更好的辦法？將所有內容更改爲其他內容將會很困難，並且會傾向於設計所有元素或其他內容的樣式。

我正在使用的代碼是這樣的：

<div class=EntLine> 
    <div class=EntLbl> 
     <label for="Name">Name</label> 
    </div> 
    <div class=EntFld> 
     <input type=text id="Name" /> 
    </div> 
</div>

的CSS是這樣的：

.EntLine { 
    height: 20px; 
    position: relative; 
    margin-top: 2px; 
    text-align: left; 
    white-space: nowrap; 
} 

.EntLbl { 
    float: left; 
    width: 120px; 
    padding: 3px 0px 0px 3px; 
    min-width: 120px; 
    max-width: 120px; 
    vertical-align: text-top; 
} 

.EntFld { 
    float: left; 
    height: 20px; 
    padding: 0px; 
    width: 200px; 
}

來源

2010-03-17 Erick

雖然沒有一個確切的答案，以特定的問題，有一個在這個問題中對造型形式進行廣泛的討論：http://stackoverflow.com/questions/2174633/form-layout-using-css – 2010-03-17 00:46:03

好了，一開始我想你可以使用更少的加價來實現你的目標。你可能有一個很好的理由用於包裝div表單中的每個元素左右，但如果它只是強迫一個標籤輸入對每一行，那麼你可以嵌套input的label標籤中：

 <label for="Name">Name 
      <input type="text" id="Name" /> 
     </label>

這樣你可以使用一個簡單的：

label {display: block; }

強制每一對自己的行。這也將消除對的需要，這消除了指定任何包含元素的height的需要。

您仍然可以將多個類應用於相關的字段/標籤，但它的麻煩要少得多。除非我真的錯過了一些東西。

做不到這一切，你可以簡單地添加一個空div（或其他元素），在最後的領域並具有風格：

#empty_element { 
disply: block; 
height: 0; 
clear: both; /* to force the parent element to expand to contain this element and, by extension, any non 'position:absolute' siblings that precede it in the mark-up */ 
visibility: hidden; 
}

來源

2010-03-17 00:48:50

這樣做的一個原因是爲了確保應用程序的一致性，無論用戶看到什麼樣的表單。對於我來說，爲我工作的其他開發人員更容易閱讀並更容易保持一致性。我可以給他們上面的代碼塊，不允許任何變化。額外的標記不是一個問題，因爲它是這種情況下的解決方案。 – Erick 2010-03-17 00:52:47

對於每個標籤/輸入對，您發現使用五個嵌套元素（而不是兩個）更容易？我很驚訝，但它是你的店...看到編輯，一個可能的解決方案，將迫使包含元素擴大到包括兒童，雖然它*確實*涉及增加另一個元素的形式）。 – 2010-03-17 00:56:19

CSS替換表格的表格

回答

相關問題