Question

我想用div＃字段制作一个小游戏，其中包含100个div，形状为正方形。我也希望div能够做出回应。

我试图用css给他们一个宽度百分比。

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    div{
        border: 1px solid black;
        margin: auto;
        width: 10%;
    }
    #field > div{
        float: left;
        width: 10%;
    }
</style>

但看起来像是：

float: left; 然后我擦掉了浮子：左;并放置显示：内联;

但看起来像是：

display: inline; 我下一次成功的尝试是使用jQuery来使我的div响应，我的代码看起来像。

<!DOCTYPE html>
<html>
<head>
    <title>100 div's field</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid black;
        }
        #field > div{
            float: left;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            for (var i = 0; i < 100; i++) {
                $('#field').append('<div></div>');
            };
            resizeWindow();
            $(window).resize(function(){
                resizeWindow();
            });
            function resizeWindow () {
                var windowHeight = $(window).height();
                var windowWidth = $(window).width();
                if(windowHeight < windowWidth){
                    var windowsize = windowHeight;
                }else{
                    var windowsize = windowWidth;
                }
                $('#field').css("width",  windowsize - windowsize * 0.1 + "px");
                $('#field').css("height", windowsize - windowsize * 0.1 + "px");
                $('#field > div').css("width",  windowsize * 0.1 - windowsize * 0.015 + "px");
                $('#field > div').css("height", windowsize * 0.1 - windowsize * 0.015 + "px");
            }
        });
    </script>
</head>
<body>
    <div id="field"></div>
</body>
</html>

我减小了第10名，因为我不希望div对我的#field div来说太大了。我认为我的问题现在已经解决了，但是当我调整浏览器窗口大小时，我的#field div中有很多空格，或者没有足够的空间而且我的div已经弹出。

large small

此外：

- 其他浏览器没有帮助。

- 制作表格的唯一选择是什么？

- 或者可以添加大量的CSS媒体查询

Answer 1

你应该使用纯CSS（没有JS）。

您应该使用float，而不是使用display: inline-block，并使用box-sizing: border-box自由添加边框。

请参阅此处的示例（我只使用JS添加div）：http://jsfiddle.net/BaliBalo/auc40tmr/1/

要在保持方形宽高比的同时使字段大小响应窗口大小，您可以使用vw或vh单位。这将分别是窗口宽度/高度的百分比。这样做而不是使用padding将使您能够在图块中插入内容。

以下是使用vw：http://jsfiddle.net/BaliBalo/auc40tmr/3/

的更新示例

另一个更新，用于演示您可以使用此方法将文本放入方块中。此示例还使用vmin（IE的vm后备）使字段采用可用的最大大小。

http://jsfiddle.net/BaliBalo/auc40tmr/5/

Answer 2

你可以用CSS做得很好。您需要使用box-sizing: border-box，以便每个单元格边框的宽度将包含在10%宽度中。否则，单元格的外部宽度是内容的宽度，它们都是容器宽度的10％，加上边框的宽度。< / p>

您还应该使用display: inline-block代替float: left，这更类似于您的意图。

＆＃13;

for (var i = 0; i < 100; ++i) {
  $('#container').append('<div></div>');
}

＆＃13;

#container div {
  width: 10%;
  height: 10px;
  display: inline-block;
  border: 1px solid #000;
  box-sizing: border-box
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  
</div>

＆＃13;

Answer 3

使用box-sizing: border-box来处理宽度计算而不是会计边界和display:inline-block，因此您不必担心浮动。

var html = Array.apply(null, new Array(100)).map(String.prototype.valueOf,"<div></div>");
document.getElementById("field").innerHTML = html.join("");

    *{
        margin: 0;
        padding: 0;
    }


    #field > div{
        box-sizing: border-box;
        display: inline-block;
        width: 10%;
        height: 20px;
        border: 1px solid black;
    }

<div id="field"></div>

Answer 4

尝试：

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

另见：Why did Bootstrap 3 switch to box-sizing: border-box?

Answer 5

小提琴：http://jsfiddle.net/7zL0L359/4/

使用float: left;否则您将处理保证金/填充问题。
在项目上设置box-sizing: border-box;，否则您的边框宽度会受阻。
使用数组推送然后加入项目，这要快得多。你需要你的游戏来表演！：）
重要提示：对项目使用padding-bottom: 10%;而非修复尺寸高度。这样，无论父容器的高度如何，都可以获得正方形。

HTML：

<div id="field"></div>

JS + jQuery：

$(document).ready(function() {
  var $field = $('#field');
  var boxes = [];
  for (var i = 0; i < 100; i++) {
    boxes.push('<div class="item"></div>');
  };
  $field.append(boxes.join(''));
});

CSS：

#field {
    width: 100%;
}
.item {
    float: left;
    width: 10%;
    padding-bottom: 10%;

    box-sizing: border-box;
    border: 1px solid black;
}

无法使用CSS / JavaScript响应单个div中的100 div

5 个答案: