HTML網格佈局具有不同的列每行

-1

我在想，如果有人可以給我使用HTML實現以下佈局的最佳方式提示：HTML網格佈局具有不同的列每行

我一直在使用普通的HTML表格試過，但我無法獲得不同列的不同行。

是否有任何其他網格工具，你可以推薦？

感謝

來源

2016-11-28 User 5842

你爲什麼不使用的div代替或行..的div比tablr – Jobin

快這個問題要麼過於寬泛，要麼基於觀點，要麼需要討論，所以堆棧溢出的主題也是如此。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

請回顧關於Stack Overflow的[** How to ask **]（http://stackoverflow.com/help/how-to-ask）問題以及可以詢問哪些類型的問題**（http： //stackoverflow.com/help/on-topic）和什麼類型[**應該避免。**]（http://stackoverflow.com/help/dont-ask） –

下面是一個使用div的一個例子（點擊「運行代碼片段」）：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.row { 
 
    clear: both; 
 
} 
 

 
.row > div { 
 
    border: 2px solid #000; 
 
    float: left; 
 
    height: 30px; 
 
} 
 

 
.row-2 > div { 
 
    width: 50%; 
 
} 
 

 
.row-3 > div { 
 
    width: 33.33%; 
 
    height: 50px; 
 
}

<div class="row row-2"> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div class="row row-3"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div class="row row-2"> 
 
    <div></div> 
 
    <div></div> 
 
</div>

來源

2016-11-28 15:59:41

這正是我所期待的！謝謝一堆！ –

謝謝！隨意將答案標記爲已解決（複選標記圖標）以關閉問題。 –

我會建議使用基於網格的系統。

引導就是一個很好的例子，在這裏找到更多的信息：Bootstrap grid system

研究其他選項將是柔性盒和浮動。第三，如果您必須使用表格，您應該查看td元素上的colspan屬性或僅使用多個表格。

來源

2016-11-28 15:57:22 hairmot

我同意，bootstrap是要走的路。 –

如果你不害怕使用框架實現這一點，你可以考慮在看看 http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html 或 http://getbootstrap.com/css/#grid 兩個框架提供的能力，以達到你想要的（使用HTML，CSS和JS做什麼內部）

來源

2016-11-28 15:57:41 DMuenstermann

他們必須是一張桌子嗎？

你能不能有一張寬50/50的桌子，一個寬33/33/33寬，另一個寬50/50？

那麼他們又一次必須成爲桌子嗎？你不是在更多地關注網格列而不是表格行/列範例嗎？

來源

2016-11-28 15:58:50

HTML網格佈局具有不同的列每行

回答

相關問題