CSS文本布局HTML，CSS [关闭]答案

【问题标题】：CSS text layout HTML, CSS [closed]CSS文本布局HTML，CSS [关闭]
【发布时间】：2016-12-12 17:14:38
【问题描述】：

我找不到任何关于此的信息，也许你们中的一些人可以帮助我解决这个问题。

如何在图片上制作这样的文字布局

html代码应该是这样的

<ul>
    <li><a href="">Number 1</a></li>
    <li><a href="">Number 2</a></li>
    <li><a href="">Number 3</a></li>
    <li><a href="">Number 4</a></li>
    <li><a href="">Number 5</a></li>
    <li><a href="">Number 6</a></li>
    <li><a href="">Number 7</a></li>
    <li><a href="">Number 8</a></li>
    <li><a href="">Number 9</a></li>
    <li><a href="">Number 10</a></li>
    <li><a href="">Number 11</a></li>
    <li><a href="">Number 12</a></li>
    <li><a href="">Number 13</a></li>
    <li><a href="">Number 14</a></li>
    <li><a href="">Number 15</a></li>
    <li><a href="">Number 16</a></li>
    <li><a href="">Number 17</a></li>
    <li><a href="">Number 18</a></li>
</ul>

希望有人知道这是怎么做到的。

谢谢。

【问题讨论】：

引导它是一种方式
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
可以修改HTML吗？
您可以使用 table 来做到这一点，抱歉 @Fred 但我不喜欢引导程序。
就像 Fred-ii 说的你可以使用 bootstrap。它对 HTML 的布局有很大帮助

标签： html css layout text

【解决方案1】：

想不出纯 CSS 解决方案。但是，如果您想保留 HTML 结构，您可以使用简单的 JavaScript/jQuery 解决方案将每 3 个项目包含在一个浮动块中：

var items_per_col = 3;
var items = $('.reorder').children();
for ( var i = 0; i < items.length; i+= items_per_col) {
  items.slice(i, i + items_per_col).wrapAll("<div class='block'></div>");
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border:1px solid red;
}

.reorder {
  overflow: auto;
  max-width: 230px;
}

.reorder .block {
  border:1px solid black;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="reorder">
    <li><a href="#">Number 1</a></li>
    <li><a href="#">Number 2</a></li>
    <li><a href="#">Number 3</a></li>
    <li><a href="#">Number 4</a></li>
    <li><a href="#">Number 5</a></li>
    <li><a href="#">Number 6</a></li>
    <li><a href="#">Number 7</a></li>
    <li><a href="#">Number 8</a></li>
    <li><a href="#">Number 9</a></li>
    <li><a href="#">Number 10</a></li>
    <li><a href="#">Number 11</a></li>
    <li><a href="#">Number 12</a></li>
    <li><a href="#">Number 13</a></li>
    <li><a href="#">Number 14</a></li>
    <li><a href="#">Number 15</a></li>
    <li><a href="#">Number 16</a></li>
    <li><a href="#">Number 17</a></li>
    <li><a href="#">Number 18</a></li>
</ul>

JSFiddle：https://jsfiddle.net/azizn/9qh23top/

【讨论】：

【解决方案2】：

如何将列表分成两部分并使用CSS的column属性。

HTML：

<ul>
  <li><a href="">Number 1</a></li>
  <li><a href="">Number 2</a></li>
  <li><a href="">Number 3</a></li>
  <li><a href="">Number 4</a></li>
  <li><a href="">Number 5</a></li>
  <li><a href="">Number 6</a></li>
  <li><a href="">Number 7</a></li>
  <li><a href="">Number 8</a></li>
  <li><a href="">Number 9</a></li>
  <li><a href="">Number 10</a></li>
  <li><a href="">Number 11</a></li>
  <li><a href="">Number 12</a></li>
</ul>
<ul>

  <li><a href="">Number 13</a></li>
  <li><a href="">Number 14</a></li>
  <li><a href="">Number 15</a></li>
  <li><a href="">Number 16</a></li>
  <li><a href="">Number 17</a></li>
  <li><a href="">Number 18</a></li>
</ul>

CSS：

ul {
  column-count: 3
}

在此处了解有关 CSS 列的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

【讨论】：