1

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

这是编码：

http://jsfiddle.net/5Ajt8/

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

4

4 回答 4

0

像这样的东西？

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;
}
于 2012-08-13T00:44:06.120 回答
0

在其中一列内放一张桌子。

于 2012-08-13T00:35:23.797 回答
0

您可以text-align:center;在每列的容器上尝试任何一种。

您还可以将每个视频单独包装起来，div然后给它div一个margin:0 auto

于 2012-08-13T00:38:10.773 回答
0

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

http://jsfiddle.net/L74yt/

于 2012-08-13T00:39:14.047 回答