Question

我是设计网站的新手，我有一个问题。我正在设计网页有3列（流畅的布局），我想知道如何制作它所以我可以在每列中有多个项目？我想通过这个网页实现的目的是在这个网页上嵌入9个youtube视频，我想要3行，所以我需要能够在每一列中将3个堆叠在一起。而且我正试图弄清楚如何在不使用已弃用的中心标记的情况下将列中的每个视频居中。感谢

下面是编码：

http://jsfiddle.net/5Ajt8/

它看起来在该网站的预览中搞砸了，所以如果你复制并粘贴它并在浏览器中查看它看起来应该是正常的

Answer 1

将一张表放在其中一列中。

Answer 2

您可以在容器上为每列尝试text-align:center;。

您还可以将每个视频打包在自己的div中，然后将div margin:0 auto {{1}}给予{{1}}

Answer 3

通过将margin-left和margin-right声明为auto，您可以居中在它的容器中的块元素。

http://jsfiddle.net/L74yt/

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;
}

如何将多个项目放在一列中？

4 个答案: