Question

如何将此div拆分为4个宽度相等的列，每行最多10个？

我尝试了以下几种变体：

  <div class="column_split">
    <h2>Course Name</h2></br>
    <ul>
      {% for course in courses%}
          <li>{{ course}}</li>
      {% endfor %}
    </ul>
  </div>

使用以下引导程序.css：

.column_split {
  column-count:4;
  row-count:10;
  column-gap: 30px;
}

基本上我正在尝试这个：

https://www.w3schools.com/css/tryit.asp?filename=trycss3_column-rule-color

来自for循环的我的LI。但是，使用教程中的代码似乎不起作用。

以下是html代码：

<style>
  .column_split {
      -webkit-column-count: 4; /* Chrome, Safari, Opera */
      -moz-column-count: 4; /* Firefox */
      column-count: 4;
      row-count: 10;
      -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
      -moz-column-gap: 25px; /* Firefox */
      column-gap: 25px;
      -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
      -moz-column-rule-style: solid; /* Firefox */
      column-rule-style: solid;

      -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
      -moz-column-rule-color: lightblue; /* Firefox */
      column-rule-color: lightblue;
  }
  </style>
      <div class="col">
        <h2>Available Courses</h2></br>
        <div class ="column_split"
        <ul>

          {% for course in courses%}
              <li>{{ course  }}</li>
          {% endfor %}
        </ul>
      </div>

Answer 1

我认为您需要在HTML代码中加入一些JavaScript。我不确定你在代码中使用的“循环”是否只适合你，但不幸的是它对我不起作用。这是一个例子：

<script>
function myFunction() {
var array = ["Text 1", "Text 2", "Text 3", "Text 4", "Text 5"]
var x="<ul>", i, y = array.length;
for(i=1; i<=y; i++) {
x +=  "<li>" + array[I] + "</li>";
}
}
document.getElementByClass("column_split").innerHTML = x;
</script>

希望这可以让您了解自己需要做什么。

将div拆分为4列，每行最多10行

1 个答案: