我的浮动离开div,如果它变得太窄

时间:2016-05-27 21:31:39

标签: html css

如果太简单,我没有发现这个问题。我有一堆DIV的大小都一样。我把它们水平地漂浮在整个地方 页面:

#xx {
    max-height: 180px; overflow-y: hidden;
}
.hflo {
    width: 180px;
    height: 150px;
    float: left;
    margin: 1em;
}

然后我分配了所有Divs class =“hflo”xx是父div的id。我没有指定宽度。我希望DIV在页面上游行然后下降并在它们击中右边缘时开始新行而不仅仅是消失。

所以它是

<div id="xx">
   <div class="hflo"> ... </div>
   .
   .
   .
</div>

2 个答案:

答案 0 :(得分:0)

那么为什么在父div上设置max-height?如果你删除它,它们会开始一个新的行并且不会消失:

#xx {
    overflow-y: hidden;
}

See this fiddle

答案 1 :(得分:0)

div会开始一个新行,但是因为您将#xx的最大高度设置为150px而被隐藏。只需删除max-height媒体资源或使用其他overflow

即可

解决方案1:

#xx {
    overflow-y: hidden;
}

解决方案2:

#xx {
    max-height: 180px;
    overflow-y: scroll;
}