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网格布局具有不同的列每行

回答

相关问题