html - 有没有办法在 Accordion 中显示行和列？

Question

问题:我有一个有时可能很长的记录列表。我想在 Accordion 中以 4 列显示列表。

注意:为了这个例子，我只尝试显示 2 列。

1) 下面的 Accordion (具有适当的样式设置)可以工作，但它很乱，因为它水平显示行。

<button class="accordion">NUMBER OF RIDES PER JOCKEY</button>

<div class="panel">

    <p><p class="break-word" align="justify"><p style="line-height:18px;"><font face="Lato"><font size="1.5"><font color="#000000"><b>ADAM HYERONIMUS</b> HAS <b>2</b> RIDE(S) TODAY. <b>BRENTON AVDULLA</b> HAS <b>6</b> RIDE(S) TODAY. <b>GLYN SCHOFIELD</b> HAS <b>1</b> RIDE(S) TODAY. <b>JASON COLLETT</b> HAS <b>4</b> RIDE(S) TODAY. <b>KERRIN MCEVOY</b> HAS <b>7</b> RIDE(S) TODAY. <b>NOT DECLARED</b> HAS <b>7</b> RIDE(S) TODAY. <b>TOMMY BERRY</b> HAS <b>9</b> RIDE(S) TODAY. <b>ANDREW ADKINS</b> HAS <b>2</b> RIDE(S) TODAY. <b>BROCK RYAN</b> HAS <b>4</b> RIDE(S) TODAY. <b>HUGH BOWMAN</b> HAS <b>6</b> RIDE(S) TODAY. <b>JAY FORD</b> HAS <b>5</b> RIDE(S) TODAY. <b>LUKE CURRIE</b> HAS <b>5</b> RIDE(S) TODAY. <b>ROBBIE DOLAN</b> HAS <b>5</b> RIDE(S) TODAY.</font></p>

</div>

2) 下面的代码(没有按钮类=“ Accordion ”)按照我喜欢的方式显示行和列，但是，当我添加“按钮类=” Accordion ”时，它不起作用。它仅显示一个不起作用的按钮，然后是 2 列数据。

<button class="accordion">NUMBER OF RIDES PER JOCKEY</button>

<div class="panel">

   <div class="row">

      <!-- Column 1 -->
      <div class="column" style="background-color:#FFFFFF;">
     <p style="line-height:18px;"><font face="Lato"><font size="1.5"><font color="#000000">
         <p><b>ADAM HYERONIMUS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BRENTON AVDULLA</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>GLYN SCHOFIELD</b> HAS <b>1</b> RIDE(S) TODAY.</p>
         <p><b>JASON COLLETT</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>KERRIN MCEVOY</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>NOT DECLARED</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>TOMMY BERRY</b> HAS <b>9</b> RIDE(S) TODAY.</p>
      </div>

      <!-- Column 2 -->
      <div class="column" style="background-color:#FFFFFF;">
     <p style="line-height:18px;"><font face="Lato"><font size="1.5"><font color="#000000">
         <p><b>ANDREW ADKINS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BROCK RYAN</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>HUGH BOWMAN</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>JAY FORD</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>LUKE CURRIE</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>ROBBIE DOLAN</b> HAS <b>5</b> RIDE(S) TODAY.</p>
      </div>

</div>

有没有办法做到这一点？

提前谢谢你。

Answer 1

您的第二个示例存在一些问题。您正试图将一堆 p 标签嵌套在另一个 p 标签中。这在 html 中不起作用；请改用 div 标签。此外，您没有关闭那些父 p 标签。假设您使用的是 html 5，则不推荐使用 font 标签。请改用 css 作为您的字体。从这个开始一些改进的标记，然后只应用字体 css。另外，不确定驱动 Accordion 打开/关闭的 javascript 是什么样子，所以我无法验证它是否有效。

<button class="accordion">NUMBER OF RIDES PER JOCKEY</button>

<div class="panel">

   <div class="row">

      <!-- Column 1 -->
      <div  class="column" style="background-color:#FFFFFF;">

         <p><b>ADAM HYERONIMUS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BRENTON AVDULLA</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>GLYN SCHOFIELD</b> HAS <b>1</b> RIDE(S) TODAY.</p>
         <p><b>JASON COLLETT</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>KERRIN MCEVOY</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>NOT DECLARED</b> HAS <b>7</b> RIDE(S) TODAY.</p>
         <p><b>TOMMY BERRY</b> HAS <b>9</b> RIDE(S) TODAY.</p>
      </div>

      <!-- Column 2 -->
      <div class="column" style="background-color:#FFFFFF;">

         <p><b>ANDREW ADKINS</b> HAS <b>2</b> RIDE(S) TODAY.</p>
         <p><b>BROCK RYAN</b> HAS <b>4</b> RIDE(S) TODAY.</p>
         <p><b>HUGH BOWMAN</b> HAS <b>6</b> RIDE(S) TODAY.</p>
         <p><b>JAY FORD</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>LUKE CURRIE</b> HAS <b>5</b> RIDE(S) TODAY.</p>
         <p><b>ROBBIE DOLAN</b> HAS <b>5</b> RIDE(S) TODAY.</p>
      </div>
  </div>
</div>

和CSS

.column {
  font-family:'Lato';
  font-size: 1.5rem;
}