我有一些容器,他们的孩子只是绝对的/相对的。如何设置容器的高度,以便他们的孩子进入其中?
这是代码:
HTML
<section id="foo"> <header>Foo</header> <article> <div class="one"></div> <div class="two"></div> </article> </section> <div style="clear:both">Clear won't do.</div> <!-- I want to have a gap between sections here --> <section id="bar"> <header>bar</header> <article> <div class="one"></div><div></div> <div class="two"></div> </article> </section>
CSS
article { position: relative; } .one { position: absolute; top: 10px; left: 10px; background: red; width: 30px; height: 30px; } .two { position: absolute; top: 10px; right: 10px; background: blue; width: 30px; height: 30px; }
这是一个jsfiddle。我希望“栏”文本出现在4个正方形之间,而不是在它们后面。
有简单的解决方法吗?
请注意,我不知道这些子项的高度,也无法为容器设置高度:xxx。
如果我了解您要正确执行的操作,那么我认为使用CSS保持孩子的绝对位置是不可能的。
绝对定位的元素已从文档流中完全删除,因此它们的尺寸不能更改其父级的尺寸。
如果 确实 必须在将子代保持为的同时实现这种影响,则position: absolute可以使用JavaScript通过在呈现后定位绝对子代的高度,并使用其来设置父代的高度来确定高度。
position: absolute
或者,只需使用float: left/float:right和页边距即可获得相同的定位效果,同时将子级保留在文档流中,然后可以overflow:hidden在父级上使用(或任何其他clearfix技术)以使其高度扩展到其子级。
float: left
float:right
overflow:hidden
article { position: relative; overflow: hidden; } .one { position: relative; float: left; margin-top: 10px; margin-left: 10px; background: red; width: 30px; height: 30px; } .two { position: relative; float: right; margin-top: 10px; margin-right: 10px; background: blue; width: 30px; height: 30px; }