CSSのテキストレイアウトHTML、CSS

Question

私はこれについて何かを見つけることができません。

は、どのように私は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> 

ようになる絵

に、このようなテキストのレイアウトを作るのですか。

ありがとうございました。

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layoutsは、純粋なCSSのソリューションを考えることはできません。あなたはHTML構造を保持したい場合は、あなたは浮いたブロック内のすべての3つの項目が含まれているために、簡単なJavaScriptを/ jQueryのソリューションを使用することができます。

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/

Answer 2

リストを2つの部分に分割し、CSSの列プロパティを使用する方法について説明します。

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列詳細については、こちらをご覧ください：