将 2 个 div 并排显示，而不是将其推到新的一行

Question

我在菜单中有 2 个 div，它们在单击时隐藏和显示。我希望它们并排显示，与第二张图片中的同一行，而不是被推到新的一行。我正在使用 materializecss。

这是标记：

$('#location-filter').on('click', function(e) {
  $('#locationFilter').toggle('1000');
  $('.location-filter').toggleClass('fa-angle-down fa-times');
});

$('.length-filter').on('click', function(e) {
  $('#lengthFilter').toggle('1000');
  $('.length-filter').toggleClass('fa-angle-down fa-times');
});

$('.price-filter').on('click', function(e) {
  $('#priceFilter').toggle('1000');
  $('.price-filter').toggleClass('fa-angle-down fa-times');
});

<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 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>

<div class="col m7 offset-m5">
  <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>

Answer 1

如果您在 MaterializeCSS 中使用网格系统，您需要为元素留出空间，即使它们是隐藏的。没有一种简单的方法可以让列动态调整大小。

为了您想要的结果，您需要使用 display:flex css 指令进行一些自定义 css。这是您可以改编的示例：

代码笔：https://codepen.io/nonsintetic/pen/YzrqWjP

$(".btn").click(function() {
  $('.input-container.auto-hide').toggleClass("show");
})

.menu-container {
  display: Flex;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.input-container {
  flex-grow: 1;
  padding: 0 5px;
}

.input-container input,
.input-container select {
  width: 100%;
}

.input-container.auto-hide {
  display: none
}

.input-container.auto-hide.show {
  display: block;
}

.btn {
  border: 1px solid #ccc;
  padding: 5px 10px;
  display: inline-block;
  margin: 10px 5px;
  cursor: pointer
}

.btn:hover {
  color: #000;
  border-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu-container">
  <div class="input-container">
    <input type="text" />
  </div>
  <div class="input-container">
    <input type="text" />
  </div>
  <div class="input-container">
    <input type="text" />
  </div>
  <div class="input-container auto-hide">
    <select>
      <option>- Choose -</option>
    </select>
  </div>
  <div class="input-container">
    <input type="text" />
  </div>
  <div class="input-container auto-hide">
    <select>
      <option>- Choose -</option>
    </select>
  </div>
</div>
<div style="text-align:center">
  <div class="btn">Toggle hidden selects</div>
</div>

Answer 2

所以我想到的解决方案是为移动设备和桌面使用不同的元素，然后在桌面元素上使用绝对位置。

这是结果：

将 2 个 div 并排显示，而不是将其推到新的一行

show 2 divs next to each other instead of pushing the one on a new row

jquery

css

materialize