【问题标题】:Dynamic floating 2 column动态浮动2列
【发布时间】:2014-10-29 20:10:46
【问题描述】:

http://jsfiddle.net/ny3es0dk/

#floating_body_container {
border: 1px solid #ddd;
padding: 5px;
float: left;
width: 450px;
height: auto;
margin: 5px;
background: #eee;
}

我正在尝试仅使用 html/css 创建响应式“更新流”(尽管如果绝对必要,我可以使用 js/jquery)。问题是新“行”上的每个新 div 只会从最后一行的较高 div 的底部开始。理想情况下,div 会位于其上方较短 div 的一侧。您可以在 jsfiddle 上看到说明的问题。

谢谢。

【问题讨论】:

    标签: html css responsive-design css-float


    【解决方案1】:
    #floating_body_container:nth-child(even) {
        float: right;
    }
    

    解决问题。

    【讨论】:

    • 它只在这种特定情况下使用这些尺寸。它不会出现在随机大小的 div 上
    • 我已经将它部署在现场,并添加了 5 个 div,它运行良好。所有不同的尺寸。
    猜你喜欢
    • 1970-01-01
    • 2017-10-21
    • 1970-01-01
    • 2017-11-28
    • 2014-10-29
    • 1970-01-01
    • 2018-06-20
    • 1970-01-01
    • 2011-07-20
    相关资源
    最近更新 更多