父母子div彼此相邻，不使用位置：绝对 [英] Parent and child div next to each other without using position:absolute

问题描述

是否有方法将父元素和子元素相邻放置（就像它们不是父项和子项并向左浮动一样），而不使用子元素上的position：absolute？

$ b 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％; / *相对于祖父母* / 
身高：100％; 
背景颜色：红色; 
} 
 #child {
 width：90％; / *相对于祖父母* / 
身高：100％; 
 background-color：green; 
} 
  

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

在此先感谢！

$ b $所以我用css做了这个，然后我附加了一个小提琴。基本上，我将 #child 元素的900％作为它的父项，并且还给它一个 margin-left 的宽度的父母，所以他们没有重叠。希望这有助于！

Is there a way to position a parent and a child element next to each other (as if they weren't parent and child and floating left) without using position:absolute on the child element? Both parent and child should have dynamic width relative to the grandparent element.

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;
}

I don't want to use jquery. JavaScript would be ok though. In the end it should look as if parent and child were both child to the "grandparent" element and floating left.

Thanks in advance!

解决方案

So I did this using css and I attached a fiddle. Basically, I made the #child element 900% of it's parent and also gave it a margin-left of the width of the parent, so they didn't overlap. Hope this helps!

这篇关于父母子div彼此相邻，不使用位置：绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！