HTML中的高效表單佈局

將Silverlight應用程序轉換爲「html5」web應用程序的過程。我只是想知道什麼是最有效/可讀的莊園來佈局一個複雜的企業形式。下面是一個形式的例子：HTML中的高效表單佈局

enter image description here

我能在幾分鐘內XAML中奠定了這一點。這將是佈局如下：

enter image description here

我聽說它的不好的形式使用表中的HTML。任何意見，將不勝感激。

感謝

2012-08-14 Matt

的[CSS3靈活的盒子（http://dev.w3.org/csswg/css3-flexbox /）模型很可能是你想要的......但是，目前對它的支持非常非常差，尤其是因爲舊的flexbox標準在最近發生了顯着變化。 – thirdender 2012-08-14 00:37:42

@Raven嘿，你想這個http://tinkerbin.com/YZuf83MX – 2012-08-14 04:43:45

@RohitAzad那是很好當場就完全是我想要我的事。我只能看到的問題是，爲什麼第一個width_Auto列不像最後一個那樣動態擴展？ – Matt 2012-08-15 05:22:40

我會建議採用面向對象的CSS，它會自動解決佈局問題。你會希望在不同的場景中將結構適應不同的大小，所以你可能想在你的css中使用一個網格系統來集中設計佈局。

.left { float:left; } 
.right { float: right } 
.global { width: 960px; } 
.onefifth { width: 20%; } 
.onetenth { width: 10%; } 
.onetwentieth { width: 5%; }

等等...

我答應你這種做法將導致更高的性能提升不少降低您的造型。不使用表

恕我直言，使生活更輕鬆。

見：https://github.com/stubbornella/oocss/wiki/（面向對象CSS）這是尼科爾Sullivan做了與雅虎和Facebook來說，絕對是值得看的

來源

2012-08-14 05:28:43

首先，你真的需要HTML5或只是聽說它是現代？

其次，表是壞的，如果你不表格數據使用它們。例如，使用表格佈局網站是一件非常糟糕的事情。對於您的情況我建議你瞭解CSS一點，利用一些浮動，申報單，字段集等

來源

2012-08-14 00:26:18 walther

沒有網站真的不是html5它只是一個asp.net mvc頁面。只是引用流行詞。 – Matt 2012-08-14 00:31:20

@Raven，EHM，一個網站可以是asp.net的MVC和HTML5的同時，這些不是相互排斥的:) Asp.net MVC是一個「服務器端，啄」，而HTML5是實際的HTML版本，這是被傳遞給客戶端瀏覽器。 – walther 2012-08-14 00:33:55

伴侶我們正在離題。我知道html5是什麼（實際上它是一個愚蠢的術語，如此廣泛，它甚至不再有意義，我只是將它引用爲主題問題中的一個流行詞）。這裏的問題實際上並不涉及html5或asp.net mvc。它涉及到html和css。 – Matt 2012-08-14 00:38:28

也許有人會說一種形式確實表格數據，或者表格數據中至少輸入。而不是使用一個表像的：

Name  | John 
Last Name | Doe 
Country | XX

你可以說：

Name  | <input> 
Last Name | <input> 
Country | <input>

也可以工作就像一個表，所以我認爲這是給你的。

來源

2012-08-14 02:42:34

HTML中的高效表單佈局

回答

相關問題