javascript - 如何使较大的子 div 始终适合父 div？

Question

Html

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

样式表

.child1, .child2, .child3{
    display: block;
    float: left;
}

.parent{
    height: 200px;
}

子 div 的高度可能大于 200px，但我无法弄清楚如何使其适合父级而不 chop 子 div 的内容。

Answer 1

请参阅此 fiddle

正如我的评论中提到的，您可以使用 overflow:auto; 作为 .parent 这将使父级可滚动。

CSS

.child1,.child2,.child3 {
    height:100px;
    width:50%;
    margin:10px;
}
.parent {
    height: 200px;
    overflow:auto;
}

如果您只想垂直滚动条，请使用 overflow-x:auto 作为 .parent 而不是 overflow:auto;

请参阅docs有关溢出的更多信息。