1. 首页
  2. 问答
  3. 如何在div中放置多个div

如何在div中放置多个div

2016-01-04 70 views
1

我试图在另一个div/html文档中居中放置多个div（整个div的块），但每次尝试在StOv上找到的东西时我都失败了。如何在div中放置多个div

这是我想要做的一张照片。

first top situation is what I have right now and the bottom one is what I´d like to do.

编辑：

我很抱歉，但是，我使用嵌套的jQuery的，这是对的jsfiddle太复杂了，只有我能做的就是链接到我使用的文件：http://goo.gl/3kXjK9

这里是我的代码：

<div id="device" style="position: relative; height: 971px; width: 100%; margin-left: auto; margin-right:auto;"> 


    <div class="box size42" data-box="0" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="1" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="2" data-width="107" style="display: block; position: absolute; width: 107px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="3" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="4" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="5" data-width="35" style="display: block; position: absolute; width: 35px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="6" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size62" data-box="7" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="8" data-width="107" style="display: block; position: absolute; width: 107px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="9" data-width="71" style="display: block; position: absolute; width: 71px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="10" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="11" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="12" data-width="35" style="display: block; position: absolute; width: 35px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="13" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="14" data-width="71" style="display: block; position: absolute; width: 71px; height: 107px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="15" data-width="71" style="display: block; position: absolute; width: 71px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="16" data-width="35" style="display: block; position: absolute; width: 35px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="17" data-width="71" style="display: block; position: absolute; width: 71px; height: 35px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="18" data-width="35" style="display: block; position: absolute; width: 35px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="19" data-width="71" style="display: block; position: absolute; width: 71px; height: 71px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    <div class="box size22" data-box="20" data-width="71" style="display: block; position: absolute; width: 71px; height: 107px; top: 0px; left: 0px;" data-y="0" data-x="0"></div> 

    </div>

来源

2016-01-04 user2295265

+2

安排你能不能给我们http://jsfiddle.net工作的例子吗？ –

+2

正是。而你的代码不是很干净。最好使用像现在这样的html文件，并为你的样式使用css文件。 –

+0

这是行得通的，你给了'＃device'一个100％的宽度，所以它正在填满屏幕。你在右边看到的差距是因为灰色的div不适合最后的空间，所以包装也是如此。 – gaynorvader

回答

0

您可以使用下面的CSS居中，

#parent { 
    position: relative; 
    height: 971px; 
    left:0px; 
    right:0px; 
    margin:auto; 
    width:100%; 
}

希望得到这个帮助。 :)

来源

2016-01-04 14:55:47

1

通过改变#device CSS：

  • 取出宽度
  • 使用自动边距：
#device { 
    width: auto; 
    margin: 0 auto; 
}

来源

2016-01-04 15:02:16 Manuszep

0

我没有太多去，因为没有现场演示，所以这里是我所做的：

  • 使用flexbox，#device1是flex容器并且正在控制儿童.box居中。当然有其他的方法来安排它们。

  • 的#device1通过施加padding: 10px到body

  • 移除其负责表示示出在一个角落所有.box的所有定位性能居中。

  • 已更正#device1正在写入CSS属性的属性。

  • 请注意保留原始尺寸，因此每个元素的尺寸与原先的尺寸相同。

  • 增加了另一个#device2来演示order的flexbox属性。在#device2上，.box每个都分配了一个order属性和一个整数值。该.box相应（but only in appearance, in the DOM they are positioned as they are in the code）

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>34593110</title> 
 
    <style> 
 
    html, 
 
    body { 
 
     box-sizing: border-box; 
 
     font: 400 16px/1.45"Verdana"; 
 
     height: 100vh; 
 
     width: 100vw; 
 
    } 
 
    *, 
 
    *:before, 
 
    *:after { 
 
     box-sizing: inherit; 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0 none hlsa(0%, 0, 0, 0); 
 
     outline: 0 none hlsa(0%, 0, 0, 0); 
 
    } 
 
    body { 
 
     position: relative; 
 
     background-color: #111; 
 
     color: #EEE; 
 
     padding: 10px; 
 
    } 
 
    #device { 
 
     display: -webkit-flex; 
 
     display: flex; 
 
     -webkit-flex-flow: row wrap; 
 
     flex-flow: row wrap; 
 
     -webkit-justify-content: center; 
 
     justify-content: center; 
 
     -webkit-align-items: center; 
 
     align-items: center; 
 
     -webkit-align-content: center; 
 
     align-content: center; 
 
     outline: 3px dashed red; 
 
     background-color: hsla(0, 100%, 50%, .3); 
 
    } 
 
    .box { 
 
     outline: 1px solid blue; 
 
     background-color: hsla(240, 100%, 50%, .3); 
 
     font-size: 1.2rem; 
 
     text-align: center; 
 
     color: #FF0; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="device" height="971" width="100%" style="margin: 20px auto;"> 
 
    <div class="box size42" data-box="0" data-width="35" style="width: 35px; height: 35px;">1</div> 
 
    <div class="box size22" data-box="1" data-width="71" style="width: 71px; height: 35px;">2</div> 
 
    <div class="box size22" data-box="2" data-width="107" style="width: 107px; height: 71px;">3</div> 
 
    <div class="box size22" data-box="3" data-width="35" style="width: 35px; height: 35px;">4</div> 
 
    <div class="box size22" data-box="4" data-width="71" style="width: 71px; height: 35px;">5</div> 
 
    <div class="box size22" data-box="5" data-width="35" style="width: 35px; height: 71px;">6</div> 
 
    <div class="box size22" data-box="6" data-width="71" style="width: 71px; height: 35px;">7</div> 
 
    <div class="box size62" data-box="7" data-width="35" style="width: 35px; height: 35px;">8</div> 
 
    <div class="box size22" data-box="8" data-width="107" style="width: 107px; height: 35px;">9</div> 
 
    <div class="box size22" data-box="9" data-width="71" style="width: 71px; height: 71px;">10</div> 
 
    <div class="box size22" data-box="10" data-width="35" style="width: 35px; height: 35px;">11</div> 
 
    <div class="box size22" data-box="11" data-width="71" style="width: 71px; height: 35px;">12</div> 
 
    <div class="box size22" data-box="12" data-width="35" style="width: 35px; height: 71px;">13</div> 
 
    <div class="box size22" data-box="13" data-width="71" style="width: 71px; height: 35px;">14</div> 
 
    <div class="box size22" data-box="14" data-width="71" style="width: 107px; height: 71px;">15</div> 
 
    <div class="box size22" data-box="15" data-width="71" style="width: 71px; height: 71px;">16</div> 
 
    <div class="box size22" data-box="16" data-width="35" style="width: 35px; height: 35px;">17</div> 
 
    <div class="box size22" data-box="17" data-width="71" style="width: 71px; height: 35px;">18</div> 
 
    <div class="box size22" data-box="18" data-width="35" style="width: 35px; height: 71px;">19</div> 
 
    <div class="box size22" data-box="19" data-width="71" style="width: 71px; height: 71px;">20</div> 
 
    <div class="box size22" data-box="20" data-width="71" style="width: 107px; height: 71px;">21</div> 
 
    </div> 
 

 
    <div id="device" height="971" width="100%" style="margin-left: auto; margin-right:auto;"> 
 
    <div class="box size42" data-box="0" data-width="35" style="width: 35px; height: 35px; order: 11;">1</div> 
 
    <div class="box size22" data-box="1" data-width="71" style="width: 71px; height: 35px; order: 20;">2</div> 
 
    <div class="box size22" data-box="2" data-width="107" style="width: 107px; height: 71px; order: 1;">3</div> 
 
    <div class="box size22" data-box="3" data-width="35" style="width: 35px; height: 35px; order: 12;">4</div> 
 
    <div class="box size22" data-box="4" data-width="71" style="width: 71px; height: 35px; order: 13;">5</div> 
 
    <div class="box size22" data-box="5" data-width="35" style="width: 35px; height: 71px; order: 2;">6</div> 
 
    <div class="box size22" data-box="6" data-width="71" style="width: 71px; height: 35px; order: 14;">7</div> 
 
    <div class="box size62" data-box="7" data-width="35" style="width: 35px; height: 35px; order: 15;">8</div> 
 
    <div class="box size22" data-box="8" data-width="107" style="width: 107px; height: 35px; order: 19;">9</div> 
 
    <div class="box size22" data-box="9" data-width="71" style="width: 71px; height: 71px; order: 3;">10</div> 
 
    <div class="box size22" data-box="10" data-width="35" style="width: 35px; height: 35px; order: 16;">11</div> 
 
    <div class="box size22" data-box="11" data-width="71" style="width: 71px; height: 35px; order: 18;">12</div> 
 
    <div class="box size22" data-box="12" data-width="35" style="width: 35px; height: 71px; order: 4;">13</div> 
 
    <div class="box size22" data-box="13" data-width="71" style="width: 71px; height: 35px; order: 16;">14</div> 
 
    <div class="box size22" data-box="14" data-width="71" style="width: 107px; height: 71px; order: 9;">15</div> 
 
    <div class="box size22" data-box="15" data-width="71" style="width: 71px; height: 71px; order: 5;">16</div> 
 
    <div class="box size22" data-box="16" data-width="35" style="width: 35px; height: 35px; order: 17;">17</div> 
 
    <div class="box size22" data-box="17" data-width="71" style="width: 71px; height: 35px; order: 21;">18</div> 
 
    <div class="box size22" data-box="18" data-width="35" style="width: 35px; height: 71px; order: 7;">19</div> 
 
    <div class="box size22" data-box="19" data-width="71" style="width: 71px; height: 71px; order: 6;">20</div> 
 
    <div class="box size22" data-box="20" data-width="71" style="width: 107px; height: 71px; order: 10;">21</div> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2016-01-04 15:43:22 zer00ne

相关问题

 相关问题