列与填充重叠，但不是填充宽度

-1

我创建了一个5列布局与divs彼此重叠，使它们之间5px的空间。列与填充重叠，但不是填充宽度

我正在使用边框来修复恼人的填充问题。

问题：由于我使用边距来移动div，所以“列”根本不适合宽度。

CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    text-align: center; 
} 
.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.col-1-5, 
.col-2-5, 
.col-3-5, 
.col-4-5, 
.col-5-5 { 
    float: left; 
    margin-left: -5px; 
} 
.col-first { clear: left; margin-left: 0; } 

.col-1-5 { width: 240px; } 
.col-2-5 { width: 480px; } 
.col-3-5 { width: 720px; } 
.col-4-5 { width: 960px; } 
.col-5-5 { width: 1200px; } 

.module { 
    background: #f1ebe5; 
    padding: 5px; 
} 
.module-content { 
    background: #fff; 
    height: 320px; 
} 

.col-3-5 .module-content { /* Middle col has main content, thus higher */ 
    height: 400px; 
}

HTML

<div class="grid"> 
    <div class="col-1-5 col-first module"> 
     <div class="module-content"> 
      240px x 320px 
     </div> 
    </div> 
    <div class="col-3-5 module"> 
     <div class="module-content"> 
     720px x 400px 
     </div> 
    </div> 
    <div class="col-1-5 module"> 
     <div class="module-content"> 
      240px x 320px 
     </div> 
    </div> 
</div>

卸下

margin-left: -5px;

使整个事物适合1200px的宽度，但在列之间使用10px“边框”而不是5px。

我敢肯定，有一个很简单的解决办法，我已经尝试过的事情之一是：在第一个或最后一列

自定义填充右修复丢失的宽度。

但内容给列不同的高度，这是行不通的。

这是最终的结果如何注定是： Final Result - Photoshop

来源

2013-06-30 Matias Vad

您可以通过使用zurb基础HTTP摆脱CSS制作这样的电网：//foundation.zurb。 com /它使用网格系统，并且它非常易于使用，只需使用它的类即可，全部为 –

表或CSS表，将增长或readapt他们的布局，td将互相推动，并将永远不会重叠。你只能保证里面的东西。怎么样：border-spacing：5px？ –

@IchigoKurosaki我对使用另一个像基础的网格系统不感兴趣。 –

这里是我的解决问题的方法，这涉及到对设计的总宽度刚好为5px宽。当我选择1200px宽的设计时，并不是最优的，但它解决了不同div在重叠时不对齐的问题。

JSFiddle

HTML

<div class="col-5-5 module top"> 
    <div class="module-content">1205px</div></div> 

<div class="grid"> 
    <div class="col-5-5"> 
     <div class="col-1-5 module col-first "> 
      <div class="module-content"> 
       245px x 320px 
      </div> 
     </div> 

     <div class="col-2-5 module main"> 
      <div class="module-content"> 
       585px x 400px 
      </div>   
     </div> 

     <div class="col-2-5 module col-last"> 
      <div class="module-content"> 
       585px x 500px 
      </div> 
     </div> 
    </div> 
</div>

CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.col-1-5 { width: 245px; } 
.col-2-5 { width: 485px; } 
.col-3-5 { width: 725px; } 
.col-4-5 { width: 965px; } 
.col-5-5 { width: 1205px; } 

.col-1-5, 
.col-2-5, 
.col-3-5, 
.col-4-5 { 
    float: left; 
    margin-left: -5px; 
} 
.col-first { 
    clear: left; 
    margin-left: 0; 
} 

.module { 
    background: #f1ebe5; 
    padding: 5px; 
} 
.module-content { 
    background: #fff; 
    height: 320px; 
} 

/* Random stuff to make this example worth something */ 
.top .module-content { height: 100px; } 
.top.module { padding-bottom: 0; } 
.main .module-content { height: 400px; } 
.col-last .module-content { height: 500px; }

来源

2013-07-07 10:19:19

列与填充重叠，但不是填充宽度

回答

相关问题