Question

所以我正在研究一个tumblr主题，我有一个父级div，有4个孩子，分为两行。父母只会伸展到第一个孩子的高度，但不会包含所有孩子。这会导致父div下方的div覆盖第二行子节点。

相关的HTML：

<div class="leftcol">
<div class="sidebar">
   <div class="sideblock" id="sideimg"><div class="borda"><div class="circle"></div></div></div>
   <div class="sideblock" id="about">
       <div class="sidetitle">{lang:About me}</div>
       <div class="description"><div class="textbox">{Description}</div></div>
   </div>
   <div class="sideblock" id="nav">
       <div class="sidetitle">{lang:Navigate}</div>
       <div class="description">links here</div>
   </div>
   {block:IfExtraBox}
   <div class="sideblock" id="extra">
       <div class="sidetitle">{text:Extra Title}</div>
       <div class="description">{text:Extra Text}</div>
   </div>
   {/block:IfExtraBox}
</div>
</div>

相关的CSS（我删除了颜色，border-radius和其他看起来不重要的东西）：

.leftcol {
    overflow:auto;
    clear:both;
}
.sideblock{
    margin-bottom:10px;
    overflow: auto;
    height: auto;
}
.borda {
    border-width: 3px;
    padding: 6px;
    width: 136px;
    height: 136px;
    margin: 0px auto;
}
.circle {
    width: 128px;
    height: 128px;
    margin-bottom: 5px;
    border-width: 4px;
}
#sideimg{
    width:30%;
}
#about{
    height:154px;
    position:absolute;
    left:30%;
    top:10px;
    width:67%;
}
#nav{
    position:absolute;
    top:164px;
    left:3%;
    width:45%;
}
#extra{
    position:absolute;
    top:164px;
    left:52%;
    width:45%;
}
.description {
    padding:5px 5px 10px 10px;
    overflow: auto;
}
.sidetitle {
    padding:0 10px;
    height:34px;
}
.textbox {
    max-height: 100px;
    overflow: auto;
    padding-right: 5px;
}

我尝试了几种不同的解决方案。孩子们最初是漂浮的，所以我给了他们所有的ids，并让他们绝对定位。我试着加上“清楚：两个;” “溢出：汽车;”和“身高：汽车;”但它仍然没有解决问题。有谁知道我做错了什么？谢谢！

更新：Here是一个jsfiddle

更新：我将所有孩子改为浮动div并使用边距来代替它们，现在它可以正常工作。

父母不适合孩子

0 个答案: