具有固定保证金的响应/流体4栏

Question

对于我的生活，我无法解决为什么我的4栏布局打破了，有人能帮我修复吗？当您缩小浏览器时，布局更改为3列，在所有屏幕尺寸下，我需要4列。

它具有“12px”固定边距的流体宽度（'max-width：1056px'）。 http://jsfiddle.net/KwUcG/1/

我不想使用'@media'和断点，因此我使用了max-width和percentages。

HTML

<section id="organisations"> 

<div class="wrap"> 
    <div class="inner"> 
     <div class="fourcol"> 
      <div class="block"> 
       <img src="img/fitzwilliam-museum.jpg" /> 
       <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p> 
      </div> 
     </div> 
     <div class="fourcol"> 
      <div class="block"> 
       <img src="img/fitzwilliam-museum.jpg" /> 
       <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p> 
      </div> 
     </div> 
     <div class="fourcol"> 
      <div class="block"> 
       <img src="img/fitzwilliam-museum.jpg" /> 
       <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p> 
      </div> 
     </div> 
     <div class="fourcol"> 
      <div class="block"> 
       <img src="img/fitzwilliam-museum.jpg" /> 
       <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p> 
      </div> 
     </div> 
    </div> 
</div> 

</section> 

CSS

.wrap { 
padding: 0 40px; 
margin: 0 auto; 
background: #e4f; 
overflow: hidden; 
} 

.inner { 
    max-width: 1056px; 
    margin: 0 auto; 
    background: #34e; 
    overflow: hidden; 
} 

.fourcol { 
display: inline-block; 
width: 24%; 
margin-left: 12px; 
background: #ccc; 
} 

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

Answer 1

http://jsfiddle.net/KwUcG/2/

适用于float：left;

您遇到的另一个问题是您需要使用％边距。

我建议使用25％宽度列的1％边距。添加框尺寸：边框;修正浮动时的框大小问题。

.wrap { 
    padding: 0 40px; 
    margin: 0 auto; 
    background: #e4f; 
    overflow: hidden; 
} 

    .inner { 
     max-width: 1056px; 
    width: 100%; 
     margin: 0 auto; 
     background: #34e; 
     overflow: hidden; 
    box-sizing: border-box; 
    } 

.fourcol { 
    float: left; 
    width: 24%; 
    margin-left: 1%; 
    margin-right: 0; 
    background: #ccc; 
    box-sizing: border-box; 
} 

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

理由，为什么你不能使用固定保证金：

以1056像素宽度的例子。 24％的1056px = 253.44倍4列= 1013.76 + 3列的12px页边空间是1013.76 + 36 = 1049.76。在这种情况下，这种方式会留下一些空间。

采取的示例800像素宽然而...

的800像素= 192倍的24％4列= 768 + 36（3列值得12px的余量空间）= 804px

804px大于800px的100％，并因此而中断。你可以通过减少24到23或22或21来避免这种情况...但是，那么你正在大幅度地减少房地产。

当使用％的利润都增加了...

Answer 2

不幸的是，你必须使用的margin百分比为好。当我将.inner缩小到300px时，12px太多，列本身是70px。尝试使用1％的裕量，和位以下（浏览器不兼容）的宽度，例如，23.7％，而不是24％

为了澄清，建议的CSS是：

.fourcol { 
    display: inline-block; 
    width: 23.7%; 
    margin-left: 1%; 
    background: #ccc; 
}