css - CSS 可以将相邻的子项/内容相互清除以堆叠

Question

可以设置孩子（两个并排的父母）互相清除吗？

Stack说我还不能发布图片所以......

这是重叠的小提琴：http: //jsfiddle.net/vEvYZ/28/ -UPDATED with example

更新：最终结果看起来像日历上的“事件”，最后一个内容在更长的先前内容的底部……这是我知道描述我所追求的最好的方式。希望有帮助。

.contain{ 
     height:120px; 
 width:500px; 
 border:thin  solid  #FF0000; 
 overflow:scroll;
}

.row{
  height:100px;
  width:950px; 
}

.parent{ 
    height:100px;
    width:100px; 
    display:inline-block; 
    border-right:thin  solid #666666; 
    border-bottom:thin  solid #666666;
    position:relative;

}


.child{ 
    width:90px; 
    height:20px;
    float:left;

    /*this attempt not working*/
    clear:both;
    position:relative;
    z-index:20;
 }

Answer 1

看来您可能需要重新考虑 html 的结构。一方面，使用内联样式是一种不好的做法，因为它会使代码难以维护并且可读性降低。

此外，考虑到整个.childdiv 的内容使用的不同颜色块，这些内容区域可能应该是嵌套在 div 中的单独.childdiv。

---

所以，如果我理解正确的话，这里是 HTML：

<div  class="contain">
    <div  class="row">

        <!-- parent div: -->
        <div class = "parent">
            <div class = "child">
                <div class = "red">
                </div>

                <div class = "yellow">
                </div>

                <div class = "blue">
                </div>
            </div>
        </div> <!-- end of parent div -->

        <!-- parent div: -->
        <div class = "parent">
            <div class = "child">
                <div class = "blue">
                </div>

                <div class = "yellow">
                </div>

                <div class = "red">
                </div>
            </div>
        </div> <!-- end of parent div -->
    </div> <!-- end of row -->
</div> <!-- end of contain -->

...这是CSS：

    .contain {
        height: 120px;
        width: 500px;
        border: thin solid #FF0000;
        overflow: scroll;
    }

    .row {
        height: 100px;
        width: 700px;
    }
    .parent {
        height: 100px;
        width: 100px; 
        display: inline-block; 
        border-right: thin solid #666666; 
        border-bottom: thin solid #666666;
        position: relative;
    }
    .child {
        width: 90px;
        height: 20px;
        /*float: left; ...don't need this one */
    }

    .red {
        height: 100%;
        background-color: red;
    }
    .yellow {
        height: 100%;
        background-color: yellow;
    }
    .blue {
        height: 100%;
        background-color: blue;
    }

---

此外，您不需要float: left在.childdiv 上使用，因为display: inline-block在.parentdiv 上具有相同的效果。

这是一个有趣的链接： http ://robots.thoughtbot.com/post/159806965/how-i-learned-to-stop-floating-and-love-the