当内容向左浮动时，materialize CSS可折叠对象不适合其内容

debugcn 发表于 Dev

穆罕默德·埃姆雷·奥泽（Mehmet Emre Ozer）

首先看一下当div元素不向左浮动时的情况：https : //jsfiddle.net/vdsg824f/

然后在div元素向左浮动时查看此处：https : //jsfiddle.net/p07ashn4/9/

我希望这种可折叠的东西能够像在第一种情况下那样，能够适应其所有内容。

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, {accordion: true});
  });

.card {
    float: left;
    width: 300px;
    margin: 3px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="collapsible">
      <li>
        <div class="collapsible-header">List View</div>
        <div class="collapsible-body" id="PublicList">
  acaba
        </div>
      </li>
      <li>
        <div class="collapsible-header">Thumbnail View</div>
        <div class="collapsible-body" id="PublicCard">
          <div class="testWrapper">
      <div class="card  blue-grey darken-1" data-acaba="3">
        <div class="card-content white-text">
          <span class="card-title">Card Title 2</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="1">
        <div class="card-content white-text">
          <span class="card-title">Card Title 3</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="2">
        <div class="card-content white-text">
          <span class="card-title">Card Title 1</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>

我怎样才能做到这一点？

穆罕默德·埃姆雷·奥泽（Mehmet Emre Ozer）

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, {accordion: true});
  });

.card {
    float: left;
    width: 300px;
    margin: 3px;
}

.testWrapper {

  width:100%;
   display: flex;
   flex-wrap: wrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="collapsible">
      <li>
        <div class="collapsible-header">List View</div>
        <div class="collapsible-body" id="PublicList">
  acaba
        </div>
      </li>
      <li>
        <div class="collapsible-header">Thumbnail View</div>
        <div class="collapsible-body" id="PublicCard">
          <div class="testWrapper">
      <div class="card  blue-grey darken-1" data-acaba="3">
        <div class="card-content white-text">
          <span class="card-title">Card Title 2</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="1">
        <div class="card-content white-text">
          <span class="card-title">Card Title 3</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
      
      <div class="card  blue-grey darken-1" data-acaba="2">
        <div class="card-content white-text">
          <span class="card-title">Card Title 1</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>