Question

我是网络编程的新手。我想使用多列布局，其中每列将包含与列标题相对应的内容，如我的Google Chrome应用程序中的tweetdeck app 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 */
}

Answer 2

你的问题有点模糊。您是在询问如何实现相同类型的布局，还是想知道如何使用内容填充列？

如果是前者，你可以这样做：

<强> HTML：

<body>
<div id="container">
<div class="columns" id="div1"></div>
<div class="columns" id="div3"></div>
<div class="columns" id="div2"></div>
</div>

<强> CSS：

body {
    padding:0px;
    margin:0px;
}
#container {
    width:900px;
    margin:0 auto;
    text-align:center;
}
.columns {
    width:280px;
    height:250px;
    background:#CCCCCC;
}
#div1 {
    float:left;
}
#div2 {
    margin: 0 auto;
}
#div3 {
    float:right;
}

要为每个列提供内容，它实际上取决于您正在做什么。如果它是您自己的内容，您可以使用数据库和AJAX从PHP scrips中提取内容。

布局类似于谷歌Chrome的tweetdeck应用程序

2 个答案: