不同列之间的边界距离答案

【问题标题】：Border distance between different columns不同列之间的边界距离
【发布时间】：2013-04-29 22:12:16
【问题描述】：

这就是我想要实现的目标：

我遇到的问题是，在调整列之间的空白区域的大小时，总是会在宽度和高度上看起来与其他的不同：

这是我的标记：

<div id="wrapper">  
   <div id="header" class="clearfix"></div>
   <div class="layout clearfix"> 
   <div class="small_box top_left ">
    <img class="fittobox" src="img/home7.jpg" alt="home7" width="800" height="689">
   </div>
   <div class="small_box top_middle large_h">
    <img class="fittobox" src="img/home6.jpg" alt="home6" width="747" height="1330">
   </div>
   <div class="small_box top_right">
    <img class="fittobox" src="img/home5.jpg" alt="home5" width="503" height="460">
   </div>
   <div class="small_box bottom_left">
     <img class="fittobox" src="img/home2.jpg" alt="home2" width="830" height="800">
   </div>
   <div class="small_box bottom_right">
     <img class="fittobox" src="img/home7.jpg" alt="home7" width="800" height="689">
   </div>               
   </div><!-- Layout -->        
 </div><!-- wrapper -->

有了这个LESS：

    /*---- HOME - SHOP - TIENDAS LAYOUT ----*/
    .layout{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0px;
        bottom: 0px;
        z-index: 1;
        overflow: hidden;
        min-height: 100%;
        max-height: 100%;
        .fittobox{
            display: none;
        }
        .small_box{
            width: 33%;
            overflow: hidden;
            height: 45%;
            position: absolute;
            &.top_left{
                top: 3%;
            }
            &.top_middle{
                top: 3%;
                left: 50%;
                margin-left: -16%;
            }
            &.top_right{
                top: 3%;
                right: 0;
                margin-right: 0;
                width: 32%;
            }
            &.bottom_left{
                bottom: 40px;
                left: 0;
            }
            &.bottom_middle{
                bottom: 40px;
                left: 50%;
                margin-left: -16%;
            }
            &.bottom_right{
                bottom: 40px;
                right: 0;
                margin-right: 0;
                width: 32%;
            }
            &.large_h{
                top: 3%;
                height: 93%;
            }
            &.fullscreen{
                width: 100%;
                height: 100%;
            }
            &.halfscreen{
                width: 67%;
                height: 93%;
                top: 3%;
            }
    }

【问题讨论】：

问题出在这样一个事实，因为你的盒子高度和宽度是百分比，所以你的边距也是百分比，所以它们会随着窗口的大小而缩放。可悲的是，没有一个简单的 CSS 方法突然出现在我的脑海中，尽管您可以通过将百分比相加然后在面板内使用基于像素的填充作为边距来获得一些结果......

标签： html css

【解决方案1】：

标准盒子模型将边框、内边距和边距等东西放在盒子外面。

这意味着，如果您有一组大小以百分比表示的框，您希望将它们相加为 100%，则它们之间不能有填充。

但是，您可以使用 CSS box-sizing:border-box; 更改盒子模型，使填充等位于盒子内。

使用此设置，您现在可以指定您的框，以便它们加起来为 100%，但仍以像素为单位为它们提供填充和边距，而不会弄乱布局。

希望对您有所帮助。

在此处阅读有关box-sizing 的更多信息：https://developer.mozilla.org/en-US/docs/CSS/box-sizing

浏览器兼容性：IE6 或 IE7 不支持。在所有其他浏览器中都能正常工作。（IE6/7 的 polyfills can be found here）。

【讨论】：