自定義CSS佈局的問題

我正在爲一個項目編寫模板，而且我遇到了一個問題。我想這樣的一個模板：自定義CSS佈局的問題

每個矩形應該是16/9。左上方有一個主矩形，另一個較小。所有必須有響應，可能我不會使用任何框架（我也想與IE9 +兼容）。這就是我設法到目前爲止做的（有一個鏈接Codepen）：

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
/* Grid */ 
 

 
.grid { 
 
    display: block; 
 
    background: black; 
 
} 
 
/* Clearfix */ 
 

 
.grid:before, 
 
.grid:after { 
 
    content: ""; 
 
    display: table; 
 
    line-height: 0; 
 
} 
 

 
.grid:after { 
 
    clear: both; 
 
} 
 
/* Unit */ 
 

 
.unit { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
/* Dimensions */ 
 

 
.whole { 
 
    width: 100%; 
 
} 
 

 
.half { 
 
    width: 50%; 
 
} 
 

 
.two-thirds { 
 
    width: 66.6665%; 
 
} 
 

 
.one-third { 
 
    width: 33.3332%; 
 
} 
 

 
.one-quarter { 
 
    width: 25%; 
 
} 
 

 
.three-quarters { 
 
    width: 75%; 
 
} 
 
/* Gutters */ 
 

 
.unit { 
 
    padding: 2.5px; 
 
} 
 

 
.no-gutters { 
 
    padding: 0; 
 
} 
 

 
.no-left-gutters { 
 
    padding-left: 0; 
 
} 
 

 
.no-right-gutters { 
 
    padding-right: 0; 
 
} 
 
/* Content */ 
 

 
.content { 
 
    position: relative; 
 
    background-color: gray; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-bottom: 56.25%; 
 
    /* 16:9 */ 
 
} 
 

 
.content div { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
/* Responsive Stuff */ 
 

 
@media screen and (max-width: 500px) { 
 
    .unit { 
 
    width: auto; 
 
    float: none; 
 
    } 
 
} 
 
/* Specific CSS */ 
 

 
.container { 
 
    position: relative; 
 
} 
 

 
.containers > div { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.player { 
 
    background-color: red; 
 
}

<div class="grid container"> 
 
    <div class="unit three-quarters no-right-gutters"> 
 
    <div class="unit whole"> 
 
     <div class="content player"> 
 
     <div>Player</div> 
 
     </div> 
 
    </div> 
 
    <div class="grid"> 
 
     <div class="unit one-third"> 
 
     <div class="content"> 
 
      <div>Thumb</div> 
 
     </div> 
 
     </div> 
 
     <div class="unit one-third"> 
 
     <div class="content"> 
 
      <div>Thumb</div> 
 
     </div> 
 
     </div> 
 
     <div class="unit one-third"> 
 
     <div class="content"> 
 
      <div>Thumb</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="unit one-quarter no-left-gutters"> 
 
    <div class="unit whole"> 
 
     <div class="content"> 
 
     <div>Thumb</div> 
 
     </div> 
 
    </div> 
 
    <div class="unit whole"> 
 
     <div class="content"> 
 
     <div>Thumb</div> 
 
     </div> 
 
    </div> 
 
    <div class="unit whole"> 
 
     <div class="content"> 
 
     <div>Thumb</div> 
 
     </div> 
 
    </div> 
 
    <div class="unit whole"> 
 
     <div class="content"> 
 
     <div>Thumb</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我在做什麼錯？我的方法錯了嗎？

編輯：解決http://codepen.io/Mulder90/pen/KVKMKO :)

來源

2015-12-04 Mulder90

一兩件事，你的問題沒有考慮到不同的長寬比。如果所有的矩形都是16/9，那麼這裏假設顯示器是16/9，但不是所有的顯示器都是16/9。你有這個計劃嗎？ – Comptonburger

如果已經有框架爲你做了這些（爲什麼），爲什麼你不使用它們？如果你想用自己的方式重新發明輪子，我希望你有一個很好的理由。 – csmckelvey

http://stackoverflow.com/questions/1495407/how-to-maintain-the-aspect-ratio-of-a-div-using-only-css那麼簡單。 – TheLexoPlexx

這是一種替代方法，（你可以通過改變瀏覽器窗口的尺寸測試）：

function resizeGrid() { 
 

 
var grid = document.getElementsByClassName('grid')[0]; 
 
var gridWidth = grid.offsetWidth; 
 
var gridHeight = grid.offsetHeight; 
 

 
if (window.innerHeight < window.innerWidth) { 
 
gridHeight = window.innerHeight; 
 
grid.style.height = gridHeight + 'px'; 
 
gridWidth = ((gridHeight/3) * 4); 
 
grid.style.width = gridWidth + 'px'; 
 
} 
 

 
if (window.innerWidth < window.innerHeight) { 
 
gridWidth = window.innerWidth; 
 
grid.style.width = gridWidth + 'px'; 
 
gridHeight = ((gridWidth/4) * 3); 
 
grid.style.height = gridHeight + 'px'; 
 
} 
 

 
} 
 

 
window.addEventListener('load',resizeGrid,false); 
 
window.addEventListener('resize',resizeGrid,false);

body, .grid { 
 
background-color: rgb(0,0,0); 
 
} 
 

 
.grid { 
 
position: absolute; 
 
top: 0; 
 
} 
 

 
.unit { 
 
float: left; 
 
border: 2px solid rgb(0,0,0); 
 
box-sizing: border-box; 
 
} 
 

 
.one-quarter { 
 
width: 25%; 
 
height: 25%; 
 
background-color: rgb(127,127,127); 
 
} 
 

 
.three-quarters { 
 
width: 75%; 
 
height: 75%; 
 
background-color: rgb(255,0,0); 
 
} 
 

 
.grid, .content, .content > div { 
 
width: 100%; 
 
height: 100%; 
 
}

<div class="grid"> 
 

 
<div class="unit three-quarters"> 
 
<div class="content player"> 
 
<div>Player</div> 
 
</div> 
 
</div> 
 

 

 
<div class="unit one-quarter"> 
 
<div class="content"> 
 
<div>Thumb</div> 
 
</div> 
 
</div> 
 

 
<div class="unit one-quarter"> 
 
<div class="content"> 
 
<div>Thumb</div> 
 
</div> 
 
</div> 
 

 
<div class="unit one-quarter"> 
 
<div class="content"> 
 
<div>Thumb</div> 
 
</div> 
 
</div> 
 

 
<div class="unit one-quarter"> 
 
<div class="content"> 
 
<div>Thumb</div> 
 
</div> 
 
</div> 
 

 
<div class="unit one-quarter"> 
 
<div class="content"> 
 
<div>Thumb</div> 
 
</div> 
 
</div> 
 

 
<div class="unit one-quarter"> 
 
<div class="content"> 
 
<div>Thumb</div> 
 
</div> 
 
</div> 
 

 
<div class="unit one-quarter"> 
 
<div class="content"> 
 
<div>Thumb</div> 
 
</div> 
 
</div> 
 

 
</div>

來源

2015-12-04 02:17:05 Rounin

我上面的原始帖子中的'.grid'尺寸保持凍結。我現在更新了Javascript，腳本更像我最初設想的那樣工作。 – Rounin

自定義CSS佈局的問題

回答

相關問題