CSS可以让相邻的 child /内容相互清除堆叠

Question

(两个并排 parent 的) child 可以设置为互相清除吗？

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

这是重叠的 fiddle :http://jsfiddle.net/vEvYZ/28/ -更新了示例

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

.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 的结构。首先，使用内联样式是一种不好的做法，因为它会使代码难以维护且可读性差。

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

---

所以，如果我没理解错的话，这里是 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;
    }

---

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

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