2

私はWebプログラミングに不慣れです。Google Chromeアプリケーションの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 に答える