Verhindern Sie, dass float left div in eine neue Zeile wechselt

Ich habe 4 Divs, die so eingestellt sind, dass sie nach links schweben, aber das End-Div umschließt immer wieder zwei Zeilen auf einem kleineren Bildschirm, was mich wirklich nervt von Bildschirmgröße ... und ich versuche, keine Tabelle zu verwenden (was sehr verlockend ist, wenn man sie dafür v.zuverlässig macht !!!)

Ich frage mich, wie ich dieses ärgerliche Problem beheben kann, damit sie unabhängig von der Bildschirmgröße immer in Position bleiben?

Ich habe dies als mein CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

Mein HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div> 



</div>

Bitte helfen Sie: D

Antworten auf die Frage(7)

Ihre Antwort auf die Frage