Question

我正在为我的wordpress主题创建我的第一个选项页面，我正在尝试在1个主要父div中创建多个子div。

基本上如果我输入1它将创建1 100％div，如果我输入2它将创建2 50％div，如果我输入3它将创建3 33.33％div，这将继续。

我目前没有任何代码，但jquery或css可以分红吗？即我点击3它将得到总和100 /值（在这种情况下将为3）并回答宽度：答案;？

我不是在寻找有人为我做我的工作，只是关于如何做到这一点的一些输入，但另一方面，如果你想创建一个jsfiddle例子，我不介意。

Answer 1

是的，你可以这样做，但这是非常简单的数学... 100除以div的数量将给你正确的百分比。

例如

100 / $('.class').length。

Answer 2

如果您需要定位modern browser only，您还可以使用flexbox布局。

关于codepen的示例：http://codepen.io/anon/pen/xmhyz（在Fx27和Chrome33上测试）

标记

<section>
  <div>1</div>
</section>  

<section>
  <div>1</div>
  <div>2</div>
</section>  

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

CSS

section { 
  display: flex; /* here you set a flex container */
  width: 400px; 
  margin: 30px; 
  border: 2px #ccc dashed; 
}

div {
  border: 1px #666 solid;
  flex-grow: 1; /* this set equal width to all divs
                   so they fill the available space */

}

产生的影响

enter image description here

无论如何，如果您的浏览器不支持flexbox布局。您可以进行简单的特征检测（使用Modernizr库），然后在 domready 事件中使用js后退将宽度设置为div，例如

if (!Modernizr.flexbox) {
   /* set the equal width to all elements of you wrapper */
}

（further information关于flexbox）

Answer 3

您可以准备多个宽度类并使用它们。像这样：

如果你有最多12个colums，你可以这样做：

.twelve.columns
{
    Width:100%;
}

.eleven.columns
{
    Width: 91.666%;
}

无论哪种方式，关于你的问题：

您可以使用calc来计算css。您可以使用：

.six.columns
{
    Width:calc(100% / 6);
}

您也可以使用以下内容：calc(80% - 20px)

Answer 4

我不是百分百肯定我明白你在追求的是什么......所以（根据我的理解）我会假设：

您希望能够在text框
您想要动态创建div（在父div /容器内）
您希望div与相同且相等大小
div s应该跨越页面的宽度

这实际上是一件相当简单的事情。

CSS

首先，我们将为生成的div s

.generated{
    background:#2d2;
    height: 100px;
    display:inline-block;
}
.generated:nth-child(even){
    background:#d22;
}

height只是一个示例高度。

设置background颜色，以便您可以看到框; even规则是这样的，您可以轻松判断哪个框是哪个（div将显示绿色＆gt; RED＆gt;绿色＆gt; RED ...）。

display规则将所有div放在一行。

JQuery的

请参阅注释以获取解释：

$("#vin").on("change", function(){ // Create on change event
    var vin = $(this).val();       // Create and set variable for number of divs
    var cnt = 0;                   // Create the counter variable and set to 0
    $("#container").html("");      // Clear the container div
    while(cnt < vin){                                            // Loop while counter is less than number of divs
        $("#container").append('<div class="generated"></div>'); // Append div to parent container
        cnt++;                                                   // Increment counter
    }
    $(".generated").css("width", (100/vin)+"%"); // Update .generated css class with new width
})

HTML

为了简单起见，我只使用text输入和div容器......

<input type="text" name="vin" id="vin">
<div id="container"></div>

全部放在一起

http://jsfiddle.net/m3f9n/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <style>
        .generated{
            background:#2d2;
            height: 100px;
            display:inline-block;
        }
        .generated:nth-child(even){
            background:#d22;
        }
    </style>

    <script>
        $(function(){
            $("#vin").on("change", function(){
                var vin = $(this).val();
                var cnt = 0;
                $("#container").html("");
                while(cnt < vin){
                    $("#container").append('<div class="generated"></div>');
                    cnt++;
                }
                $(".generated").css("width", (100/vin)+"%");
            })
        })
    </script>

</head>

<body>
    <input type="text" name="vin" id="vin">
    <div id="container"></div>
</body>

</html>

使用jquery或css基于值创建和划分div

4 个答案:

CSS

JQuery的

HTML

全部放在一起