Html游戏库存网格

试图让一个外部div来容纳一个库存网格。在下面的jsfiddle中可以工作，但是我需要将这个外部div移动到屏幕上的绝对位置。如果你取消注释：绝对在外部网格上的CSS，所有的div都在彼此之间堆叠。Html游戏库存网格

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="Scripts/jquery-2.1.4.js"></script> 
    <script src="Scripts/jquery-ui-1.11.4.js"></script> 
    <script> 

    </script> 

    <style> 
     div { 
      width: 300px; 
      height: 600px; 
      background-color: orange; 
      left: 100px; 
      //position: absolute; 
     } 

     div div { 
      width: 100px; 
      height: 100px; 
      outline: 1px solid; 
      float: left; 
     } 
    </style> 
    <title></title> 
</head> 
<body> 
    <div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</body> 
</html>

我如何可以移动外网趴趴走我想同时保持内部网格？

来源

2015-09-03 user441521

你的风格规则冲突，因为它是所有div。尝试使用一个类为您的网格，所以你可以给他们一套明确的单独的样式规则。 –

问题是内部divs也获得position: absolute;风格。尝试添加一个类到你的外部div并使用它作为定位选择器。

<div class="inventory"> 
    <div></div> 
    ... 
</div> 

.inventory { 
    position: absolute; 
    left: 100px; 
}

来源

2015-09-03 18:28:42 Will

或使用'body> div' – Jonathan

这样做。有趣的是，内部网格的线条变得更暗/更粗/更粗。为什么会这样？ – user441521

因为那些是两个相邻的divs的两个边界 – Jonathan

Html游戏库存网格

回答

相关问题