相等間距的迴應容器

Question

考慮以下佈局的各個方面： http://jsfiddle.net/W74Z8/113/

我如何甚至在集裝箱的左側和右側間距（左5％左右），所以它在完全水平（以及所有媒體查詢）？

我試過手動做％所以它適合，但我不能得到它的工作。你有什麼想法？

我之前做了一篇文章和插圖，解釋了我想要做的事情。也許這將幫助： http://itu.dk/people/mbul/portfolio/problem_portfolio.jpg

<div class="container"> 

<ul> 
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li> 
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li>  
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li> 
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li> 
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li> 
    <li><img src="http://itu.dk/people/mbul/portfolio/box.png"></img></li> 
</ul>  

</div> 


ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    width: 100%; 
    padding-left:2%; 
    padding-right: 1%; 
    } 

img { 
    width: 23%; 
    float: left; 
    margin-right: 1%; 
    margin-bottom: 3em; 
    } 


@media only screen and (max-width : 1250px) { 
/*row of three boxes*/ 

    img { 
    width: 31%; 
    float: left; 
    } 
} 

@media only screen and (max-width : 1000px) { 
/*row of two boxes*/ 

    img { 
    width: 46%; 
    float: left; 
    } 
} 

@media only screen and (max-width : 670px) { 
/*row of one boxes*/ 

.container { 
    width: 100%; 
    padding-left:0em; 
    padding-right: 0em; 
    }  

img { 
    width: 100%; 
    float: none; 
    margin-right: 0em; 
    margin-bottom: 2em; 
    } 
} 

Answer 1

我相信你應該能夠只使用保證金：汽車。所以，你所看到的是（CSS）：

.container-example { 
    width: 50%; 
    margin: auto; 
} 

而在你的頁面的DIV：

<div class="container-example"></div> 

應該這樣做。在這裏看到一個JSFiddle（http://jsfiddle.net/wwwbv/）！

注意 - 您需要更改響應的唯一一件事是您的媒體示例中的寬度。您可以使用像素寬度或百分比寬度，這兩種方法都可以很好地工作。祝你好運！