Question

我有一个列表我想分成3列，中断必须在class =＆＃39; select_title＆＃39;是。它正在使用chrome，但我无法在firefox和microsoft边缘工作。如何让它跨浏览器工作或有更好的方法来做到这一点？我的代码是：

<ul>
<li> <div class="select_header">Header 1</div>
<li> Item 1 </li>
<li> Item 2 </li>
<li> <div class="select_header">Header 2</div>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
<li> Item 6 </li>
<li> Item 7 </li>
<li> <div class="select_header">Header 3</div>
<li> Item 8 </li>
<li> Item 9 </li>
<li> Item 10 </li>

CSS

 ul{
    -moz-column-count: 3;
    -moz-column-gap: 50px;
    -webkit-column-count: 3;
    -webkit-column-gap: 50px;
    column-gap: 50px;
    column-count: 3;
}
li.select_header{
  break-before: column;
  break-inside: avoid-column;
  break-after: avoid-column;
}
.select_header{
    font-weight: 700;
}

Edge显示它完全搞砸了，Firefox忽略了列标题

Answer 1

这是使用float css布局你可以使用css grid或flexbox但是它们还没有得到完全支持

＆＃13;

.select_header{
   font-weight: 700;
}

.row {
  max-width: 114rem;
  margin: 0 auto; 
}

.row:not(:last-child) {
  margin-bottom: 8rem; 
}

.row:after {
  content: "";
  display: block;
  clear: both;
}

.row [class^="col-"] {
  float: left; 
}

.row [class^="col-"]:not(:last-child) {
  margin-right: 1rem; 
}

    
.row .col-1-of-3 {
  width: calc((100% - 2 * 6rem) / 3); 
  background-color: orange;
}

＆＃13;

 <div class="row">
    <div class="col-1-of-3">
        <ul>
          <li> <div class="select_header">Header 1</div>
          <li> Item 1 </li>
          <li> Item 2 </li>
      </ul>
    </div>
    <div class="col-1-of-3">
      <ul>
        <li> <div class="select_header">Header 2</div>
         <li> Item 3 </li>
         <li> Item 4 </li>
         <li> Item 5 </li>
         <li> Item 6 </li>
         <li> Item 7 </li>
      </ul>
    </div>
    <div class="col-1-of-3">
       <ul>
        <li> <div class="select_header">Header 3</div>
        <li> Item 8 </li>
        <li> Item 9 </li>
        <li> Item 10 </li>
      </ul>
    </div>
</div>

＆＃13;

在浏览器的多列中放置一个列表

1 个答案: