Question

我正在构建基于卡片的布局。它响应地每行5-4-3-2-1项。页面响应恰当，但我每张卡的边距都很困难。

如果我保证金：1px;为了在元素之间创造空间，它会产生巨大的差距，而不是很小的差距。在当前状态下，边距仅在1项和3项视图上正确。所有其他人一起跑边缘。我一直在试验，无论我在哪里添加边距，都会产生过大的差距。

提示？建议？是否有致命的缺陷？

谢谢！

codepen：http://codepen.io/abrite/pen/gMaPPG

每张卡的HTML：

 <div class="item">
  <div class="cardheading">
    <h1>Alabama</h1>
  </div>
  <div class="cardcontent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
  </div>
</div>

Answer 1

不确定你在这里指的是什么巨大的差距，但增加保证金：1px;每张卡都会在卡的每一侧添加1个像素的边距。如果你有2张卡彼此相邻，每张卡都有1个像素的边距，你将在卡之间获得2个像素的边距。如果你只需要一个1像素的边距，你应该做一些像margin-right：每张卡1px，这将在卡片之间产生1px的总差距。

Answer 2

您的任何宽度都不允许使用边距。 5 x 20％= 100％。 4 x 25％= 100％，等等。

您需要减小框宽并指定左边或右边的边距以允许间距，例如：5 x 18％= 90％+ 5 x边距 - 左1％和边距 - 右1％= 100％。

有两种方法可以实现你想要的，或者通过使用Flexbox，或者使用Nth-child声明，当它是行中的第一个或最后一个框时，这有助于在框的一侧添加边距，所以行延伸到全宽。

后者在多个媒体查询中可能会特别混乱，所以我可能会选择前者。有很多关于flexboxes的在线教程。

这里有两个开始的地方：

http://the-echoplex.net/flexyboxes

http://css-tricks.com/snippets/css/a-guide-to-flexbox

响应的div行中的余量不一致

2 个答案: