html - 複数の項目を 1 つの列に入れる方法は?

Question

私はウェブサイトのデザインが初めてで、質問がありました。Web ページを 3 列 (流動レイアウト) に設計していますが、各列に複数の項目を表示できるようにするにはどうすればよいでしょうか? この Web ページで達成しようとしているのは、この Web ページに 9 つの YouTube ビデオを埋め込むことです。3 つの行が必要なので、各列に 3 つを重ねて配置できるようにする必要があります。そして、非推奨の center タグを使用せずに各ビデオを列の中央に配置する方法を見つけようとしています。ありがとう

コーディングは次のとおりです。

http://jsfiddle.net/5Ajt8/

そのサイトのプレビューではめちゃくちゃに見えるので、コピーして貼り付けてブラウザで見ると正常に見えるはずです

Answer 1

text-align:center;各列のコンテナーでいずれかを試すことができます。

また、各ビデオを独自にラップdivしてdiv、margin:0 auto

Answer 2

margin-left と margin-right を auto として宣言することで、コンテナ内でブロック要素を中央に配置できます。

http://jsfiddle.net/L74yt/

Answer 3

列の 1 つにテーブルを配置します。

Answer 4

このようなもの？

http://jsfiddle.net/marvo/NBgKZ/

構造：

<div class="page">
<div class="column">
    <div class="item">Item #1</div>
    <div class="item">Item #2</div>
    <div class="item">Item #3</div>
</div>
<div class="column">
    <div class="item">Item #1</div>
    <div class="item">Item #2</div>
    <div class="item">Item #3</div>
</div>
<div class="column">
    <div class="item">Item #1</div>
    <div class="item">Item #2</div>
    <div class="item">Item #3</div>
</div>
</div>

スタイル:

.page {
    width : 640px;
}

.column {
    background-color : #e0e0e0;
    width : 200px;
    float : left;
    border : 1px solid black;
}

.item {
    background-color : yellow;
    width : 100px;
    border : 1px dashed red;
    margin : 5px auto 5px auto;
}