css - 幅の広いウィンドウでのみ同じ行に分割する

Question

参照:フィドル

ウィンドウが十分に長い場合、両方の div は同じ行にありますが、ウィンドウが小さい場合は、2 番目の 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

.footer_links左側の div ( ) に固定の高さだけを与えたい場合は、右側の 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;
}