【问题标题】:grid issue with images图像的网格问题
【发布时间】:2013-06-23 05:38:45
【问题描述】:

我正在使用列并尝试使用宽度百分比将 4 个 div 与图像对齐。

它工作正常,但有一个问题,我有 4 列,一个 div 元素和一个图像。

除了最后一列之外,所有列都有一个填充权。

如果你看http://codepen.io/anon/pen/mtgAI

右边的 div 更大。我知道问题在于最后一个 div 没有正确的填充,

最后一列现在更大了。有什么办法可以解决这个问题?

【问题讨论】:

  • 那么为什么你没有在最后一个中添加填充?
  • 尝试将这些 div 包装在一个 中,每个 div 分别有多个 ,然后将它们置于线性状态。希望这可行。然后给每个 留出一定的空间。我知道我已经为此上过老学校了。不过试试看吧。

标签: css image layout grid


【解决方案1】:

Lloan Alas 有一个好主意,不幸的是 padding 的值应该是相同的。试试这个:

[class*='col-'] {
    float: left;
    padding-right: 10px;
    padding-left: 10px;
}

[class*='col-']:last-of-type 不是必需的。也许有更好的解决方案,但我希望它可以帮助你。 :)

【讨论】:

  • 那行得通...我最后一个没有填充的原因是让它们在两边都相等。它在没有图像的情况下工作。
猜你喜欢
  • 1970-01-01
  • 2018-12-09
  • 1970-01-01
  • 1970-01-01
  • 2023-01-14
  • 2023-03-07
  • 1970-01-01
  • 2020-02-17
  • 1970-01-01
相关资源
最近更新 更多