プレミアムWPテーマプラグイン 無料ダウンロード

Reply To:bbpressで作られた掲示板です

質問の送信 > 全てのフォーラム > Reply To:bbpressで作られた掲示板です

1
2
3
4
5
6
==>
1 2
3 4
5 6
...

CSSコード:

#main {
    width: 450px;

}
.double_column {
    padding: 5px; 
    margin: 0;
    list-style-type: none;
}
.double_column li {
    width: 40%;
    height: 200px;
    background-color: red;
    float: left;
    margin: 5px;
    padding: 5px;
}

.double_column li:nth-child(4n-1), .double_column li:nth-child(4n)
{
    background-color: blue;
}

HTMLコード

<div id="main">
    <ul class="double_column">
      <li>1. I'm glad to meet you. Here is a short code to list items in two columns.</li>
      <li>2. Please refer to the folloing link: </li>
      <li>3</li>
      <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>100</li>
  <li>11</li>
  <li>12</li>
</ul>
</div>