Question

我正在创建一个简单易用的网站，其中一个部分是一个项目部分，该部分的div希望与窗口的大小相同（从某个分辨率到某个分辨率）。我想用方形div填充所述矩形div，每个div具有相同的大小，足以填充矩形div并且不留下间隙，也不会重叠矩形div的边缘等等。什么是最好的方法，因为我现在难倒。

Answer 1

也许你可以尝试一种响应方式，通过将小宽度除以大宽度来设置较小的div高度和宽度不要问我怎么样，我也被响应的css惊呆了：O

Answer 2

使用CSS HTML和Jquery，这样的东西可以工作。

<div id="sqr_contain">
<div class="sqr">1</div>
<div class="sqr">2</div>
<div class="sqr">3</div>
<div class="sqr">4</div>
<div class="sqr">5</div>
<div class="sqr">6</div>
<div class="sqr">7</div>
<div class="sqr">8</div>
<div class="sqr">9</div>
</div>
<script>
   $(document).ready(function(){
   var a = $("#sqr_contain").height();
   $(".sqr").height(a/3);
   });
</script>

<style>
    #sqr_contain{
    width:100%;
    max-width:900px;
    height:900px; /*This can be set to anything, contained squares will auto adjust, 900 will just keep them square */
    -moz-box-sizing:    border-box;   /* Firefox 1, probably can drop this */
    -webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */
    box-sizing:        border-box;   /* Everything else */
    background: #888;
    }
.sqr {
    width:33.32%;
    -moz-box-sizing:    border-box;   /* Firefox 1, probably can drop this */
    -webkit-box-sizing: border-box;   /* Safari 3-4, also probably droppable */
    box-sizing:        border-box;   /* Everything else */
    display:inline-block;
}
</style>

无论比例和屏幕尺寸如何，如何用较小的方形div填充大的矩形div？

2 个答案: