Question

我在响应式设计方面相对较新，我正在努力解决以下问题。

我正在创建一个搜索/过滤条，每行需要五个过滤器，边缘边距为1％，中间边距为2％。我觉得这很容易;如果我将滤波器的宽度设为18％并给每个滤波器留下1％的左右边距，则为20％×5 = 100％。不幸的是，这导致第五个过滤器转到下一行。

-c fastx

name

编辑我想表明第六项应该转到一个新行，前五个子项占线宽的100％。

Answer 1

最简单的方法是将浮动左侧添加到.search-bar__filter：

.search-bar__filter {
 margin: 0 1%;
 width: 18%;
 float:left; 
}

Answer 2

使用flex更容易解决这个问题。它受到所有现代浏览器的支持 - 旧版浏览器可以通过使用前缀或polyfill来支持。

.search-bar {
  display: flex;
  flex-direction: column;
  align-items: space-between;
  width: 100%;
  background-color: #aaa;
}

.search-bar__filter {
  flex: 0 auto;
  flex: space-between;
  min-width: x;
}

参考

Flex：https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Caniuse：http://caniuse.com/#feat=flexbox
Poly fill：https://github.com/jonathantneal/flexibility

五个子元素占据容器宽度的100％，每个元素都有边距

2 个答案:

参考