Question

此代码列在1列中。我想得到一个表格2列布局。

如何在不使用float的情况下实现这一目标？

Answer 1

您可以使用flexbox：

＆＃13;

.container {
  display: flex;
}

＆＃13;

<div class="container">
  <div id="col1">
    <div>Filter by</div>
    <div>
      <input type="text" value="hello" />
    </div>
  </div>
  <div id="col2">
    <div>Search</div>
    <div>
      <input type="text" value="hello" />
    </div>
  </div>
</div>

＆＃13;

请注意，我已将span更改为div元素（因为span是内联的，不应包含块元素）。我还用div.container包裹整个块，这样我就可以将该容器设置为flexbox。

Answer 2

假设您希望能够显示/隐藏列，您可以这样做：

<head>
<script>
$('.next').click(function() {
 var next = $('.col').next();
 var curr = $('.col');

 next.addClass('col-active');
 curr.removeClass('col-active');
});
</script>
<style>
.col {
display: none;
}

.col-active {
display: block !important;
}
</style>
</head>
<body>
<span id="col1" class="col col-active">
  <div>Filter by</div>
  <div>
    <input type="text" value="hello" />
  </div>
</span>
<span id="col2" class="col">
  <div>Search</div>
  <div>
    <input type="text" value="hello" />
  </div>
</span>

<a class="next">Next Page</a>
</body>

这实际上是根据点击的<a>显示和隐藏列。当我有滑块/表格页面时，我会使用它。

希望这会有所帮助：）

不使用浮点数的内容的表格布局

2 个答案: