多个 mdl 表重叠问题

Question

您好，快速提问我想知道您是否可以在一页上放置多个 mdl 表？然而，他们都需要获得相同的表格。

我的尝试让它彼此重叠，而不是从左到右相邻。

https://codepen.io/russellharrower/pen/RZVmwo 我知道的 CSS 有错误

css

/* Downloaded from https://www.codeseek.co/ */
body {
  background: #ECEFF1;
}

.mdl-layout__content {
  padding: 24px 12px;
}
.mdl-layout__content h1 {
  font-size: 30px;
  margin: 0 0 .3em;
}

.mdl-sheet__container {
  right: 32px;
  bottom: 32px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.mdl-sheet {
  position: relative;
  background: #FF5722;
  float:left;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 180ms;
  transition: all 180ms;
}
.mdl-sheet .mdl-sheet__content {
  display: none;
}

.mdl-sheet__icon {
  color: #fff;
  position: static;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-12px, -12px);
          transform: translate(-12px, -12px);
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.mdl-sheet--opened {
  background: #fff;
  color: #263238;
  border-radius: 2px;
  width: 240px;
  height: auto;
  min-height: 150px;
  max-height: 80vh;
  overflow-y: auto;
}
.mdl-sheet--opened .mdl-sheet__icon {
  display: none;
}
.mdl-sheet--opened .mdl-sheet__content {
  display: block;
}

Answer 1

工作表重叠是因为您在前一个工作表中插入了另一个 mdl 工作表。在 css 中，我添加了 display:inline-block 以从左到右显示它们。

var $sheet = $('.mdl-sheet');

if ($sheet.length > 0) {
  $('html').on('click', function() {
    $sheet.removeClass('mdl-sheet--opened')
  });

  $sheet.on('click', function(event) {
    event.stopPropagation();

    $sheet.addClass('mdl-sheet--opened');
  });
}

/* Downloaded from https://www.codeseek.co/ */

body {
  background: #ECEFF1;
}

.mdl-layout__content {
  padding: 24px 12px;
}

.mdl-layout__content h1 {
  font-size: 30px;
  margin: 0 0 .3em;
}

.mdl-sheet__container {
  right: 32px;
  bottom: 32px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.mdl-sheet {
  display: inline-block;
  position: relative;
  background: #FF5722;
  float: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 180ms;
  transition: all 180ms;
}

.mdl-sheet .mdl-sheet__content {
  display: none;
}

.mdl-sheet__icon {
  color: #fff;
  position: static;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-12px, -12px);
  transform: translate(-12px, -12px);
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.mdl-sheet--opened {
  background: #fff;
  color: #263238;
  border-radius: 2px;
  width: 240px;
  height: auto;
  min-height: 150px;
  max-height: 80vh;
  overflow-y: auto;
}

.mdl-sheet--opened .mdl-sheet__icon {
  display: none;
}

.mdl-sheet--opened .mdl-sheet__content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class="mdl-sheet__container">
  <div class="mdl-sheet mdl-shadow--2dp">
    <i class="material-icons mdl-sheet__icon">add</i>
    <div class="mdl-sheet__content">
      <div class="mdl-list">
        <div class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-avatar">person</i>
              <span>Bryan Cranston</span>
          </span>
          <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">add</i></a>
        </div>
        <div class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-avatar">person</i>
              <span>Aaron Paul</span>
          </span>
          <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">add</i></a>
        </div>
        <div class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-avatar">person</i>
              <span>Bob Odenkirk</span>
          </span>
          <span class="mdl-list__item-secondary-content">
              <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
            </span>
        </div>
      </div>
    </div>
  </div>
  <div class="mdl-sheet mdl-shadow--2dp">
    <i class="material-icons mdl-sheet__icon">add</i>
    <div class="mdl-sheet__content">
      <div class="mdl-list">
        <div class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-avatar">person</i>
              <span>Bryan Cranston</span>
          </span>
          <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">add</i></a>
        </div>
        <div class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-avatar">person</i>
              <span>Aaron Paul</span>
          </span>
          <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">add</i></a>
        </div>
        <div class="mdl-list__item">
          <span class="mdl-list__item-primary-content">
              <i class="material-icons mdl-list__item-avatar">person</i>
              <span>Bob Odenkirk</span>
          </span>
          <span class="mdl-list__item-secondary-content">
              <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
            </span>
        </div>
      </div>
    </div>
  </div>
</div>