使用MaterializeCSS实现两个div同行并排而非换行显示的问题咨询

解决方案 #

问题出在布局结构上：你当前的两个筛选弹窗分别放在两个独立的栅格列中，第二个列还设置了offset-m5偏移量，加上Materialize自带的card类是块级元素，默认会占满父容器整行宽度，所以两个弹窗同时显示时就会自动换行。按下面调整即可实现并排：

1. 调整HTML结构

将两个弹窗外层套同一个row容器，给每个弹窗设置对应的栅格宽度类，两者宽度加起来为12即可，同时删除不必要的偏移设置，示例如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 原有触发按钮的结构保持不变 -->
<div class="col s12 m2 push-m1">
  <div class="input-field">
    <input class="select-dropdown length-input-filter lengthFilterInput" id="length-slider-toggler" type="text" readonly="true" value="Längd">
    <i class="fa fa-angle-down length-filter filter length-filter-icon"></i>
  </div>
</div>

<!-- 新增同一行容器包裹两个弹窗 -->
<div class="row">
  <!-- 长度筛选弹窗，占3列 -->
  <div class="col m3">
    <div class="card studiecentralen-transparency" id="lengthFilter" style="display: none;">
      <div class="card-content">
        <div class="row">
          <div id="length-slider"></div>
          <div id="length-values" class="mt-2"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 地点筛选弹窗，占9列 -->
  <div class="col m9">
    <div class="card studiecentralen-transparency" id="locationFilter" style="display: none;">
      <div class="card-content">
        <div class="row">
          <label class="col m2">
            <input type="checkbox" />
            <span>Blekinge</span>
          </label>
          <label class="col m2">
            <input type="checkbox" />
            <span>Dalarna</span>
          </label>
          <label class="col m2">
            <input type="checkbox" />
            <span>Gotland</span>
          </label>
          <label class="col m2">
            <input type="checkbox" />
            <span>Halland</span>
          </label>
          <label class="col m2" style="width: 200px;">
            <input type="checkbox" />
            <span>Jämtland Härjedalen</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

2. 可选补充样式

如果出现上下不对齐的情况，添加一行自定义CSS即可：

#lengthFilter, #locationFilter {
  vertical-align: top;
}

原有JS逻辑不需要做任何修改，调整后两个弹窗就会在同一行并排显示。

内容的提问来源于stack exchange，提问作者m33ts4k0z