CSS IE 替代列计数和列间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12306188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE Alternative to Column-Count & Column-Gap
提问by Jon
I am wondering if there is an IE alternative to using column-countand column-gap?
我想知道是否有使用column-countand的 IE 替代方案column-gap？
I have made this postabout creating a list that automatically create a new column for every fifth element. Leniel has suggested a solution that uses column-countand column-gapbut this is not supported by IE. I am looking for a fall back solution.
我写了这篇关于创建一个列表的帖子，该列表会为每五个元素自动创建一个新列。Leniel 提出了一个使用column-count并且column-gapIE 不支持的解决方案。我正在寻找回退解决方案。
采纳答案by Leniel Maccaferri
I found this: Multi-column Layout with CSS3. Read the section titled CSS3 Multi-Column Browser Support. It states the following:
我发现了这个：Multi-column Layout with CSS3。阅读标题为CSS3 多列浏览器支持 的部分。它声明如下：
If you need to support browsers that don't have multi-column support, then you should have a fallback option for those browsers. Here is how you can do it with the Modernizrscript...
如果您需要支持没有多列支持的浏览器，那么您应该为这些浏览器提供后备选项。这是使用Modernizr脚本执行此操作的方法...
Place the following SCRIPT tag in your HEAD after any other style sheets:
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>Add another SCRIPT below the above line that reads:
<script> Modernizr.load({ test: Modernizr.csscolumns, yep: 'columns.css', nope: 'no-columns.css' }); </script>Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.
- Create a CSS style sheet that contains your fallback CSS (such as columns with float) and save it as no-columns.css in the same directory. Test your page in IE and Chrome, Safari, or Opera.
将以下 SCRIPT 标记放在任何其他样式表之后的 HEAD 中：
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>在上面一行下面添加另一个脚本，内容如下：
<script> Modernizr.load({ test: Modernizr.csscolumns, yep: 'columns.css', nope: 'no-columns.css' }); </script>创建一个包含多列 CSS 的 CSS 样式表，并将其保存为同一目录中的 columns.css。
- 创建一个 CSS 样式表，其中包含您的备用 CSS（例如带有浮动的列），并将其保存为同一目录中的 no-columns.css。在 IE 和 Chrome、Safari 或 Opera 中测试您的页面。
The page Multiple Columnsprovides a JavaScript fallback if you're interested going this way.
如果您有兴趣采用这种方式，则多列页面提供了 JavaScript 回退。
回答by Juri
Here is solution how to make menu with multicolumns which looks the same as the one created with column-count property and works in ALL BROWSERS.
这是如何制作多列菜单的解决方案，该菜单看起来与使用 column-count 属性创建的菜单相同，并且适用于ALL BROWSERS。
This is done with floating elements, but the trick here is to re-order the elements in javascript (or server side) so they natural flow looks as up-down instead left-right
这是通过浮动元素完成的，但这里的技巧是在 javascript（或服务器端）中重新排序元素，使它们自然流动看起来是上下而不是左右
Item1 Item4 Item7
项目 1 项目 4 项目 7
Item2 Item5 Item8
项目 2 项目 5 项目 8
Item3 Item6
项目 3 项目 6
Example: http://jsfiddle.net/xrd5Y/16/
示例：http: //jsfiddle.net/xrd5Y/16/
// number of columns
var columns = 4;
var $ul = $('ul.multicolumn'),
$elements = $ul.children('li'),
breakPoint = Math.ceil($elements.length/columns);
$ordered = $('<div></div>');
function appendToUL(i) {
if ($ul.children().eq(i).length > 0) {
$ordered.append($ul.children().eq(i).clone());
}
else $ordered.append($('<li></li>'));
}
function reorder($el) {
$el.each(function(){
$item = $(this);
if ($item.index() >= breakPoint) return false;
appendToUL($item.index());
for (var i = 1; i < columns; i++) {
appendToUL(breakPoint*i+$item.index());
}
});
$ul.html($ordered.children().css('width',100/columns+'%'));
}
reorder($elements);
回答by Devin Walker
Here's what works for me: Rather than using JS or a IE-only conditional you can use Modernizr's classes directly in your stylesheet.
这对我有用：您可以直接在样式表中使用 Modernizr 的类，而不是使用 JS 或仅限 IE 的条件。
If you do an Inspect Element on our webpage, you will see that there are many CSS classes added in the html tag:
如果你在我们的网页上做一个Inspect Element，你会看到在html标签中添加了很多CSS类：
If the user's browser does not support css columns you will see a "no-csscolumns" class that you can use to float elements.
如果用户的浏览器不支持 css 列，您将看到可用于浮动元素的“no-csscolumns”类。
回答by Boris Aivazian
Here is simple solution I discovered for IE and IE Edge just separate each column by paragraph <p> your text </p>, column-2 <p> your text </p>, it worked for me.
这是我为 IE 和 IE Edge 发现的简单解决方案，只需按段落<p> your text </p>，第2 列分隔每一列<p> your text </p>，它对我有用。
#subfootera {
with:100%;
text-align:left;
padding-top: 20px;
padding-bottom: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000;
text-shadow:1px 1px 1px #999;
}
.subfooterb {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-moz-column-gap: 10px; /* Firefox */
column-gap: 10px;
}
<div id="subfootera">
<div class="subfooterb">
<p>Your Text.</p>
<p>Your text or an img</p>
</div>
</div>
