通过CSS显示元素Verticaly

Question

我有一个这样的清单：

SELECT A.RecordID, A.CallID, A.UserID, A.CallDirection 
FROM CALL_HISTORY A 
INNER JOIN 
(SELECT RecordID, CallID, UserID, CallDirection FROM CALL_HISTORY WHERE CallDirection="Initiated" AND UserID=10680 ) I 
ON A.CallID = I.CallID
UNION ALL
(SELECT RecordID, CallID, UserID, CallDirection FROM CALL_HISTORY WHERE CallDirection="Received" AND UserID=10680);

我希望像这张照片一样展示他们

*那种方式在开始时填写第一列，然后填写第二列等等。

Answer 1

使用Actions on Google：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

  

我的colomns数字是动态的，可能会改变。但是一列（最多）有3个项目。

使用column-count：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 60px; /* 60 / 3 = 20 */
  display: flex;
  flex-flow: column wrap;
}

ul > li {
  height: 20px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

但是，您必须添加一些固定的height。

Answer 2

使用jQuery，你可以使它变得动态。

$(document).ready(function() {
  var items = $("ul li").length;
  $("ul").css("column-count", Math.ceil(items / 3));
});

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

如果你想在纯JS中使用它

var list = document.querySelector("ul");
var items = document.querySelectorAll("ul li").length;
list.setAttribute("style", "column-count :" + Math.ceil(items / 3));

ul {
  list-style-type: none;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

Answer 3

尝试以下内容： https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_columns

ul {columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;}
ul li {list-style:none;}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>