html - 列数 css 和列分离

Question

我有这样的网址:http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115

你可以看到我有三列

我有这样的烦恼:id="manufacturers-list"如果我​​删除最小值和高度，我看到我的 li 被分开在不同的列中

，但是如何防止呢？

我不明白为什么我会得到这种分离((为什么它会切断我的 li？

CSS:

width: 690px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
overflow: hidden;

Answer 1

将您的内容分成不同列的是 CSS column-count 属性(包括供应商前缀。)

为了解释你的两个图像，第一个看起来像你有一个设置的高度 overflow: hidden 这将隐藏流过该高度的每个列表项。如果您有 50 个列表项，但您的容器的高度只够容纳五个，您将不会看到超过五个。

第二个看起来像是您删除了高度并赋予了 column 属性。

我刚刚查看了站点，您可能想从 .man-area 中删除 display: inline-block 样式，删除 overflow-hidden 来自外部容器 (#vip-offers)

并且在某些地方你有内联 javascript(或样式)给父容器一个固定的高度。我绝对不会推荐给一个固定的高度和一个隐藏的溢出。除非你想达到特定的效果，否则这不是好兆头。