barra di scorrimento orizzontale oltre il punto min-width
-
19-09-2019 - |
Domanda
HTML:
<div id="mcolWrapper">
<div id="mcol">
<div class="wrapper">
content
</div>
</div>
</div>
<div id="lcol">
<div class="wrapper">
content
</div>
</div>
<div id="rcol">
<div class="wrapper">
content
</div>
</div>
CSS:
#mcolWrapper {
float: left;
width: 100%; }
#mcol { margin: 0 295px 0 235px; min-width: 500px; }
#lcol {
float: left;
width: 235px;
margin-left: -100%; }
#rcol {
float: left;
width: 290px;
margin-left: -295px;
Voglio impostare una larghezza minima sulla colonna centrale in modo che non possa ridursi troppo e oltre questo punto larghezza minima, mi piacerebbe il browser per visualizzare una barra di scorrimento orizzontale anziché la colonna di destra sovrapposizione della colonna centrale.
Soluzione
Si potrebbe provare il plugin jQuery splitter. E 'quello che uso quando ho bisogno di un layout di colonna, perché fa un lavoro migliore di astraendo le differenze tra i browser di modelli CSS fare, e gestisce le barre di scorrimento in modo impeccabile.
Altri suggerimenti
min-width non è una proprietà CSS pienamente supportato. Un modo semplice intorno a questo nella vostra situazione sarebbe quella di aggiungere semplicemente un div nella parte inferiore della colonna che ha una larghezza uguale al vostro valore minimo di larghezza.
<div id="mcol">
...
<div style="width:500px;"></div>
</div>
Questo farà sì che la colonna non essere in grado di compattare ogni più piccolo. Speranza che aiuta!