Question

Col-1 col-2 col-3
A     AA     AA1
B     BB     BB1       
C     CC     CC1

我想要这样的结果。但我得到列格式的数据

请帮助如何通过CSS处理此问题

<div class="name">A</div>
<div class="name">B</div>
<div class="name">C</div>
<div class="id">AA</div>
<div class="name">A</div>
<div class="name">B</div>
<div class="name">C</div>
<div class="id">AA</div>
<div class="id">BB</div>
<div class="id">CC</div>
<div class="val">AA1</div>
<div class="val">BB1</div>
<div class="val">CC1</div>

Answer 1

如果您打算使用相同的号码。每列中的元素，这将有所帮助。

<div class="wrapper">
    <div class="name">A</div>
    <div class="name">B</div>
    <div class="name">C</div>

    <div class="id">AA</div>
    <div class="id">BB</div>
    <div class="id">CC</div>

    <div class="val">AA1</div>
    <div class="val">BB1</div>
    <div class="val">CC1</div>
</div>


.wrapper{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

https://jsfiddle.net/aq0omnkL/

当数据为列格式时，以表格格式显示div

1 个答案: