Question

我想在3列中打印我的数据。但是数据没有在列中正确排列。我对CSS的了解有限。请告诉我哪里做错了？

我需要在第6列和第8列的第3列中打印一条水平线。

<html>
<head>
<style>
.container{
    width: 596px;
    float:left;
    posy
}
.container .line {
    border-bottom: 1px dotted #999;
    border-top-style: none;
    margin: 7px 0;
    padding: 3px 0 0;
}
.col1{

    width: 186px;
    right-padding:19px;
    float:left;
}
.col2{

    left: 205px;
    right-padding:19px
    width: 186px;
    float:left;
}
.col3{

    left: 410px;
    width: 186px;
    float:right;
    right:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="col1">
<ul>
<li>Test Area 1</li>
<li>Test Area 2</li>
<li>Test Area 3</li>
<li>Test Area 4</li>
</ul>
</div>
<div class="col2">
<ul>
<li>Test Area 5</li>
</ul>
</div>
<div class="col3">
<ul>
<li> Test 6</li>
</ul>
</div>
<div class="line"></div>
<div class="col3">
<ul>
<li>Test Area 7</li>
</ul>
</div>
<div class="col3">
<ul>
<li>Test Area 8</li>
</ul>
</div>
<div class="line"></div>
<div class="col3">
<ul>
<li>Test Area 9</li>
</ul>
</div>
<div class="col3">
<ul>
<li>Test Area 10</li>
</ul>
<div class="col3">
<ul>
<li>Test Area 16</li>
<li>Test Area 17</li>
<li>Test Area 18</li>
<li>Test Area 19</li>
<li>Test Area 20</li>
</ul>
</div>
</div>
<div class="col1">
<ul>
<li>Test Area 11</li>
<li>Test Area 12</li>
<li>Test Area 13</li>
<li>Test Area 14</li>
</ul>
</div>
<div class="col2">
<ul>
<li>Test Area 15</li>
</ul>
</div>
</div>
</html>

This is what I get. enter image description here

Answer 1

这个问题类似于这里的问题： how to split the ng-repeat data with three columns using bootstrap
和这里： 3 column layout HTML/CSS

有几种解决方案。你也可以使用这个css：

li:nth-child(3)

Answer 2

你有多个col1 div，多个col2 div等原因吗？我认为你的代码会更好地与每个代码中的一个进行布局。这将使布局更加清晰。

例如：

<div class="container">
<div class="col1">
    <ul>
      <li>Test Area 1</li>
      <li>Test Area 2</li>
      <li>Test Area 3</li>
      <li>Test Area 4</li>
    </ul>
    <ul>
      <li>Test Area 11</li>
      <li>Test Area 12</li>
      <li>Test Area 13</li>
      <li>Test Area 14</li>
    </ul>
  </div>
  <div class="col2">
    <ul>
      <li>Test Area 5</li>
    </ul>
    <ul>
      <li>Test Area 15</li>
    </ul>
  </div>
  <div class="col3">
    <ul>
      <li> Test 6</li>
    </ul>
    <div class="line"></div>
    <ul>
      <li>Test Area 7</li>
    </ul>
    <ul>
      <li>Test Area 8</li>
    </ul>
    <div class="line"></div>
    <ul>
      <li>Test Area 9</li>
    </ul>
    <ul>
      <li>Test Area 10</li>
    </ul>
    <ul>
      <li>Test Area 16</li>
      <li>Test Area 17</li>
      <li>Test Area 18</li>
      <li>Test Area 19</li>
      <li>Test Area 20</li>
    </ul>
  </div>
</div>

我在这里通过演示做了一些额外的更改：http://jsfiddle.net/nsqeLha4/

用css打印3列数据

2 个答案: