Question

有没有办法将父元素和子元素放在一起（就好像它们不是父元素和子元素并且向左浮动）而不在子元素上使用position：absolute？父元素和子元素都应该具有相对于祖父元素的动态宽度。

HTML

<div id="grandparent">
   <div id="parent">
      <div id="child">
      </div>
   </div>
</div>

CSS

#grandparent {
width: 500px;
height: 250px;
border:1px solid #000;
}
#parent {
width: 10%; /* relative to grandparent */
height: 100%;
background-color:red;
}
#child {
width: 90%; /* relative to grandparent */
height: 100%;
background-color:green;
}

我不想使用jquery。 JavaScript虽然可以。最后它应该看起来好像父母和孩子都是“祖父母”元素的孩子并向左浮动。

提前致谢！

Answer 1

所以我使用css做了这个，并附上了fiddle。基本上，我将#child元素作为其父级的900％，并且还给它一个父级宽度的margin-left，因此它们没有重叠。希望这有帮助！

Answer 2

如果我正确理解了您的问题，您可能希望将#child 9 倍大于#parent，因为您将#parent宽度设置为10％< / p>

变化：

width: 90%; /* relative to grandparent */

到

width: 900%; /* relative to grandparent */

父和子div彼此相邻而不使用position：absolute

2 个答案: