Question

请参阅：fiddle

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

左边的Css：

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

来自右边的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:

<强> DEMO

<强> 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:然后它的工作

<强> DEMO2

<强> 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;
}

仅在更宽的窗口上划分同一行

4 个答案: