【问题标题】:"last" style not working. Margin“最后”样式不起作用。利润
【发布时间】:2013-05-04 18:05:38
【问题描述】:

HTML

<div class="col-3"><a class="fancybox-effects-c" rel="group" href="images/image1.jpg" title="New Home Number Two"><img src="images/thumb_image1.jpg" class="fade" alt="" width="100%" /></a></div>
<div class="col-3"><a class="fancybox-effects-c" rel="group" href="images/image2.jpg" title="New Home Number Two"><img src="images/thumb_image2.jpg" class="fade" alt="" width="100%" /></a></div>
<div class="last"><a class="fancybox-effects-c" rel="group" href="images/image3.jpg" title="New Home Number Three"><img src="images/thumb_image3.jpg" class="fade" alt="" width="100%" /></a></div>

CSS

        .col-3 {
    width:31.5%;
    float:left;
    margin-right:1.8%;
    margin-bottom:1.6949%;
    display:block;
}

.last {
    width:31.5%;
    float:left;
    margin-right:0;
    margin-bottom:1.6949%;
    display:block;
}

使用此代码。我在右边的图像应该有 0 边距。但他们没有。它们与 col-3 相同

【问题讨论】:

  • 在我看来它看起来不错
  • 必须是我的代码中的其他内容。或影响它的媒体查询。嗯
  • yupp 看起来像是因为其他 css 因为 .. 你问题中的代码工作正常
  • 对于不需要添加显示的 div:块,因为 div 默认是块元素。

标签: css image margin


【解决方案1】:

应该是一样的,因为 (31.5*3) + (1.8*2) = 98.1。因此,当您应用float: left 时,右侧剩余 1.9%。右边的空白可能看起来像边距。

【讨论】:

  • 是的,你的权利。第一次使用响应式即时通讯忘记我的计算器!我只是简化了我的计算。宽度:32% 和边距:2% 是否等于完美的 100% 谢谢!
【解决方案2】:

.col-3 和 .last 类的宽度应为 32%,.col-3 类的 margin-right 应为 2%。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-28
    • 2022-12-03
    • 2016-08-29
    • 2018-12-02
    • 2021-11-20
    相关资源
    最近更新 更多