自定义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布局的问题

回答

相关问题