使用CSS浮動和邊距問題

Question

這一直困擾着我。我一直認爲必須有更好的方式來做到這一點。我通常不得不做一個style =「margin-right 0px;」在最後的分區，所以它顯示了所有三個。但我理想的情況是喜歡沒有這種需求的情況下發生。

你會怎麼做？ （必須支持IE7）

示例代碼如下我創建的快速圖像來說明我試圖實現什麼。圖片。

.container { 
    width: 400px; 
} 

.container div { 
    width: 100px; 
    float: left; 
    margin-right: 50px; 
} 

.container a { 
    display: block; 
} 

.clearfloats { 
    clear: both;  
} 

</style> 

<div class="container"> 

    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div style="margin-right: 0px;"><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <br class="clearfloats" /> 

    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div style="margin-right: 0px;"><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <br class="clearfloats" /> 

</div> 

Answer 1

做這種事情那是早在IE7依然是兼容的最簡單的方法...表，我想。 這不是最好的標記，但你保證它會正確佈局。

<table> 
    <tr> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    </tr> 
</table> 

Answer 2

IE7支持第一個孩子的僞選擇器，雖然有點bug。

如果你漂浮在左邊，並用它來清除任何左邊距，它應該可以工作。 您也可以使用：after僞選擇器在劃分行之後清除浮點數。

<div class="container"> 

    <div class="holder"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 

    <div class="holder"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 

</div> 

與下面的CSS：

.container { 
    width: 400px; 

    background: #505050; 
} 

.holder:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.item { 
    float: left; 
    margin-left: 50px; 

    width: 100px; 
    height: 100px; 

    background: #202020; 
} 

.item:first-child { 
    margin-left: 0; 
} 

http://jsfiddle.net/8h3zr/提供了示範。

Answer 3

我認爲更好的方法是在.contanier之後和div之前添加一個新標籤。

例如：

<style> 
.container { 
    width: 400px; 
    overflow:hidden; 
} 

.subContainer{ 
    width:460px; 
} 

.container div { 
    width: 100px; 
    float: left; 
    margin-right: 50px; 
} 

.container a { 
    display: block; 
} 

.clearfloats { 
    clear: both;  
} 

</style> 

<div class="container"> 
    <div class="subContainer"> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <br class="clearfloats" /> 

     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <br class="clearfloats" /> 
    </div> 
</div>