javascript - 布局类似于 google chrome 的 tweetdeck 应用程序

Question

我是网络编程新手。我想使用多列布局，其中每列都有与列标题相对应的内容，如 tweetdeck 应用程序 http://www.tweetdeck.com/ 中所使用的那样。在我的谷歌浏览器应用程序中。我怎样才能做到这一点。

Answer 1

您可以使用 flexbox 创建所需的布局 ( JSFiddle ):

HTML:

<div class="container">
    <div class="container__column">Column 1</div>
    <div class="container__column">Column 2</div>
    <div class="container__column">Column 3</div>
    <div class="container__column">Column 4</div>
</div>

CSS:

.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex; /* applying flexbox layout for all browsers */
}

.container__column {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1; /* 1 for equal column widths */
}