css - 同一行中的 div 仅在更宽的窗口上

Question

参见：小提琴

当窗口足够长时，两个 div 都在同一行，但当它更小时，第二个 div(.footers) 移动到新行。我不希望他们一直在同一条线上。

来自左侧 div 的 CSS：

.footer .footer_links {
    float: left;
    width: 250px;
    padding: 25px 0px 0px 20px;
    min-height: 95px;
    border-right: 1px solid #d9d9d9;
    text-align: left;
}

来自右侧 div 的 CSS：

.footer .footers {
    text-align: left;
    float: left;
    padding: 0px 20px 0px 20px;
}

是什么导致了这个问题？

Answer 1

如果你只想给左边的div( .footer_links)一个固定的高度，而不是浮动右边的div( .footers)，给它overflow:hidden。这将导致它填充页面的剩余宽度：

.footer .footers {
    text-align: left;
    overflow:hidden;
    padding: 0px 20px 0px 20px;
}

JSFiddle

Answer 2

试试这个max-width:

演示

CSS

footer {
    background: #f2f2f2 !important;
    margin-top: 20px;
    padding: 10px 0px 10px 0px;
}
.footer .footer_links {
    float: left;
    width: 250px;
    padding: 25px 0px 0px 20px;
    min-height: 95px;
    border-right: 1px solid #d9d9d9;
    text-align: left;
}
.footer a {
    font-size: 14px;
    color: #898989 !important;
}
.footer .footers {
    text-align: left;
    overflow:hidden;
    padding: 0px 20px 0px 20px;
}
.footer .footers p {
    font-size: 14px;
    color: #898989;
    line-height: 20px;
}

.clear{
    clear: both;
}

在DEMO2你写max-width:了然后它的工作

演示2

CSS

.footer .footers {
    text-align: left;
    float: left;
    padding: 0px 20px 0px 20px;
    max-width:300px;
}

Answer 3

.footer .footer_links {
    float: left;
    width: 20%; // In percent
    padding: 25px 0px 0px 20px;
    min-height: 95px;
    border-right: 1px solid #d9d9d9;
    text-align: left;
}

.footer .footers {
    text-align: left;
    float: left;
    width:70%; // In percent
    padding: 0px 20px 0px 20px;
}

Answer 4

您可以向 .footers div 添加空白和固定高度：

.footer .footers {
    text-align: left;
    float: left;
    padding: 0px 20px 0px 20px;
    white-space: nowrap; 
    height: 20px;
}