Question

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

相同

Answer 1

它应该是相同的，因为（31.5 * 3）+（1.8 * 2）= 98.1。因此，当您应用float: left时，1.9％留在右侧。右侧留下的空白可能看起来像边缘。

Answer 2

类.col-3和.last的宽度应为32％，而类.col-3的边距应为2％。

“最后”的风格不起作用。余量

2 个答案: