2

我是网络编程新手。我想使用多列布局，其中每列将具有与列标题相对应的内容，如我的谷歌浏览器应用程序中的 tweetdeck 应用程序http://www.tweetdeck.com/中使用的那样。我该怎么做。

4

2 回答 2

2

您可以使用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 */
}
于 2013-06-28T06:53:59.610 回答
0

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

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

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 脚本中提取内容。

于 2013-01-13T15:17:24.697 回答