如何使 CSS3 列显示在 IE9 中工作

Question

这适用于 FF/Chrome/Opera 和 IE 10+，但不适用于 IE9；我正在寻找 IE9 解决方案

以下 CSS 将使一组 div、span 或 p 标签自组织成可以水平滚动的整齐列（仅适用于支持 WebKit 的浏览器）。

-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;

示例如下：

$(document).ready(function() {


  $(".RightArrow ").click(function() {
    $(".columns").animate({
      scrollLeft: '+=500'
    }, 100);
  });

  $(".LeftArrow ").click(function() {
    $(".columns").animate({
      scrollLeft: '-=500'
    }, 100);
  });



}); //end script

body {
  font-family: arial;
}
.columns {
  overflow: hidden;
  width: 500px;
  border: 1px solid #000;
  -webkit-column-fill: auto;
  -webkit-column-width: 300px;
  -webkit-column-gap: 40px;
  -moz-column-fill: auto;
  -moz-column-width: 300px;
  -moz-column-gap: 40px;
  padding: 0 20px;
  text-align: left;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.notsectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}
.arrows {
  width: 500px;
}
.RightArrow {
  float: right;
  cursor: pointer;
}
.LeftArrow {
  float: left;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">



  <p>
    <a class="">

      <h2>
<span class="">1</span>
NUM 1
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>


  <p>
    <a class="">

      <h2>
<span class="">2</span>
NUM 2
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>

  <p>
    <a class="">

      <h2>
<span class="">3</span>
NUM 3
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>



  <p>
    <a class="">

      <h2>
<span class="">4</span>
NUM 4
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>


  <p>
    <a class="">

      <h2>
<span class="">5</span>
NUM 5
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>

  <p>
    <a class="">

      <h2>
<span class="">6</span>
NUM 6
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>

</div>
<!--columns-->


<div class="arrows">


  <span class="LeftArrow"> Previose </span>  <span class="RightArrow">  Next </span>
</div>

https://jsfiddle.net/n5qh89vw/

我希望它以这种方式工作的原因是我直接从数据库输出到 <div> 的列表中，我想避免让它变得更复杂并且必须有输出计算数据项的数量，然后将标记形成内联 div 或表格（因为在 x 数字单元格中会使 y 列的行数为 4），因为我希望尽可能简单。

有没有办法让它与 IE 一起工作？

Answer 1

根据 Can I Use, Multiple column layout is supported in IE 10+. If you need to support older versions of IE there is a CSS multicolumn polyfill（在我可以使用的“资源”选项卡中找到）。

现在您已经更新了您的问题以指定您需要这个用于 IE9，这里是一个使用 Adam Wulf's Columnizer jQuery Plugin:

的完整示例

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="/path-to-local-file/jquery.columnizer.min.js"></script>
        <script>
            $(function(){
                $('.wide').columnize({width:400});
                $('.thin').columnize({width:200});
            });
        </script>

    <style>
        .column p, .column h1{ padding: 5px; }
        body { font-size: 9pt; }
        #wrapper { margin: 0px 100px; }
        .wide, .thin { clear:both; }
    </style>

</head>
<body>
    <div id="wrapper">
        <div class="wide">
            <h1>Lorem ipsum ne justo</h1>
            <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
            <p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
            <p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
            <h1>Tempor essent appetere</h1>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
            <h1>Soleat civibus in pri</h1>
            <p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
        </div>
        <div class="thin">
            <h1>Lorem ipsum ne justo</h1>
            <p>Bonorum has. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at meis debet vulputate. No sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. Mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. Ut vim simul aperiam.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Eu eleifend repudiandae has. Mea eu ridens aliquam. Nisl aeque sit ut, posse dolor utinam cum in. Ad timeam sapientem eos, et eripuit inermis nam. Eos integre voluptaria ne, iriure concludaturque ut eum.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Vis erant intellegat in. Soleat legere no ius, usu ex laoreet molestie. Sit eu sint inermis. Ea zzril scribentur pro.</p>
            <h1>Tempor essent appetere</h1>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
            <p>Probo debet quaestio an eos, no mel assum iracundia delicatissimi, rebum facete utroque sed ex. Eu melius invidunt repudiandae vix, eu paulo reformidans deterruisset duo, solum voluptaria efficiantur ea mel. Qui summo zzril alienum et. Eu est ferri iuvaret, mazim epicurei sententiae ut cum, modo reque intellegat ex vix. Vim eu tibique accusamus, quot electram at qui.</p>
            <p>Ex iisque eleifend periculis has. Sit aeterno virtute partiendo ei, eam nonumy bonorum adolescens ad. Ut nec suas vocent ornatus, cetero legendos constituam mea ea, pri cu delenit iracundia. Mundi decore nec te.</p>
            <h1>Soleat civibus in pri</h1>
            <p>In petentium erroribus percipitur per. Takimata accommodare ius ut, eam no postulant urbanitas. Qui ei tantas consectetuer, quis dictas euripidis duo ei. Quaeque democritum concludaturque has ne.</p>
            <p>Blandit insolens constituto vix an. Has diam wisi in, eum unum repudiare no. Sit at virtute rationibus, qui vitae explicari cu. Vim ne singulis voluptatum, sed puto accusata salutandi ei. Ad mel civibus adversarium.</p>
            <p>Ius mutat commune expetendis in. Nam et quas sensibus reprimique, vix no erat soluta suavitate. At mel eius dictas latine. Corrumpit inciderint reformidans sed no, no usu omnis utinam noluisse.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
            <p>Per ne solum vivendo, fabulas dolorem vivendo in pro. Nec duis ignota cotidieque no, an per possit nostrum. Pro detraxit definitionem eu. Vivendo officiis no nam, eu has reque maiestatis percipitur, dolore reprimique accommodare cum ad. No utinam voluptua oportere pri, augue sonet dicant ei sea.</p>
            <p>Sit et, an ius nihil apeirian. Eu posse tempor iuvaret cum. No diam dolor sea, postea mnesarchum ne ius, vel no utinam ignota dolores. Malis suscipit accusamus his ne, utinam assentior prodesset ea eam, facer partem antiopam et cum.</p>
        </div>

    </div>
</body>

您需要下载该文件，因为它没有 CDN，所以不要忘记将 path-to-local-file 更改为文件的实际位置。

对于只需要支持 10+ 的其他人，这里的问题是您只使用 CSS 的 vendor-prefix 版本。您还需要包括普通版本：

-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-fill: auto;
column-width: 300px;
column-gap: 40px;

这在 IE11 中对我有用：

$(document).ready(function() {


  $(".RightArrow ").click(function() {
    $(".columns").animate({
      scrollLeft: '+=500'
    }, 100);
  });

  $(".LeftArrow ").click(function() {
    $(".columns").animate({
      scrollLeft: '-=500'
    }, 100);
  });



}); //end script

body {
  font-family: arial;
}
.columns {
  overflow: hidden;
  width: 500px;
  border: 1px solid #000;
  -webkit-column-fill: auto;
  -webkit-column-width: 300px;
  -webkit-column-gap: 40px;
  -moz-column-fill: auto;
  -moz-column-width: 300px;
  -moz-column-gap: 40px;
  column-fill: auto;
  column-width: 300px;
  column-gap: 40px;
  padding: 0 20px;
  text-align: left;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.notsectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}
.arrows {
  width: 500px;
}
.RightArrow {
  float: right;
  cursor: pointer;
}
.LeftArrow {
  float: left;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">



  <p>
    <a class="">

      <h2>
<span class="">1</span>
NUM 1
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>


  <p>
    <a class="">

      <h2>
<span class="">2</span>
NUM 2
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>

  <p>
    <a class="">

      <h2>
<span class="">3</span>
NUM 3
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>



  <p>
    <a class="">

      <h2>
<span class="">4</span>
NUM 4
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>


  <p>
    <a class="">

      <h2>
<span class="">5</span>
NUM 5
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>

  <p>
    <a class="">

      <h2>
<span class="">6</span>
NUM 6
</h2>
      <h3>200 Broadway</h3>
      <p>This transit hub is a contemporary architectural marvel in Lower Manhattan and features a Sky Reflector Net centerpiece…</p>
    </a>


  </p>

</div>
<!--columns-->


<div class="arrows">


  <span class="LeftArrow"> Previose </span>  <span class="RightArrow">  Next </span>
</div>

Answer 2

答案很简单，是否定的。如果您不想在其中加入一些逻辑并将结果划分到特定的 DIV 中，那么您将无法获得所需的结果。对不起:(

如何使 CSS3 列显示在 IE9 中工作

How to make CSS3 column displays work in IE9

css

internet-explorer-9

css-multicolumn-layout