0

我正在通过 HTML 列表制作几个框，每个框将包含图片和文本，但整个框应该是一个链接。无论如何，列表是水平的，如下所示：

li{float:left;}

视频1 | 视频2 | 视频3 | 视频4 |

视频5 |

但由于我的列表将是 2 行，所以我希望它是这样的：

视频1 | 视频3 | 视频5 |

视频2 | 视频4 |

我该怎么做？这是演示：http: //jsfiddle.net/KjcKR/

我知道它可以用桌子制作，但有人告诉我现在桌子不是那么标准，这就是为什么我想用列表来做

4

3 回答 3

3

您可以使用列宽 http://jsfiddle.net/KjcKR/1/

ul {
    width:800px;
    background-color:#900;
    list-style-type: none;
    -moz-column-width:190px;
    -webkit-column-width:190px;
    column-width:190px;
}
于 2013-06-23T22:37:19.030 回答
2

您可以更改您的宽度ul，使其仅自动将 3 个元素放入第一行，或者将您的列表拆分为两个ul元素，并为它们提供 100% 的 adisplay: block和 a width，以便它们占据整个宽度

于 2013-06-23T22:34:49.617 回答
1

您可以使用 CSS3 多列布局

ul {
    column-width: 380px;
    -webkit-column-width:380px;
    -moz-column-width: 380px;
    height:440px;
}

请注意，这在 IE8 和之前的版本中不起作用。

http://jsfiddle.net/tutspack/8jw6r/

您可以将此 javascript polyfill 用于旧版浏览器 - http://jsfiddle.net/gryzzly/Umz6a/

于 2013-06-23T22:39:43.293 回答