Layout fluido con alcune colonne a larghezza fissa

Question

Sto esaminando l'intera progettazione reattiva e trovando griglie fluide grandi per questo - l'unico problema è che sembrano rompersi quando provo a dare una larghezza fissa a qualsiasi colonna. Mentre riduci lo schermo, le colonne saltano fuori dal float. Mi sarei aspettato una colonna fluida con una larghezza percentuale (o nessuna larghezza) solo per ridursi, lasciando le colonne a larghezza fissa in posizione. Quanto è facile creare una griglia ibrida/fluido come questa? Ho visto una soluzione con inline-block invece di blocchi flottati, ma quanto è buono questo attraverso i browser, ed è un modo pulito di fare le cose?

Ecco un esempio del problema: http://jsfiddle.net/andfinally/nJ97q/2/

Grazie! Fred

Answer 1

Imposta la larghezza minima sul wrapper div alla larghezza minima delle due colonne fisse + un po 'per la colonna successiva. Questo lo rende così non spinge.

#row { min-width: 400px; } 

L'unico avvertimento è che non è supportato da IE6 e di seguito e può essere bacato in IE7.

--------- EDIT -------------

cosa avrebbe funzionato meglio per voi in questa situazione credo che sarebbe un display: table-cell impostare. Ciò consentirà che tutto sia bloccato alle posizioni che stai cercando.

.main { 
    padding: 10px; 
    background: #efefef; 
    display: table-cell; //this locks to #sideNav 
} 

#sideNav { 
    display: table-cell; //this wraps the sidebar and middle and locks to main 
    width: 280px; 
    verticle-align: top; 
} 

.middle { 
    display: table-cell; //this locks with .sidebar 
    width: 140px; 
    padding: 10px;  
    background: #bbb; 
} 

.sidebar { 
    display: table-cell; //this locks with .middle 
    width: 100px; 
    padding: 10px;  
    background: #555; 
} 

http://jsfiddle.net/nJ97q/73/

Answer 2

Penso che la soluzione qui sotto possa probabilmente aiutarti.

Poiché si assegna la larghezza di divisione "riga" in percentuale, si ridimensiona automaticamente ogni volta che si riduce la finestra. Dagli una larghezza in pixel se puoi, se non puoi usare quindi la larghezza minima in modo che non ridimensiona al di sotto della larghezza minima e quindi il pannello rimarrà intatto.

Per rendere più fluido: È possibile aggiungere javascript per renderlo scorrevole. Usa window.onresize event per chiamare una funzione che include il codice per ridimensionare "row" lentamente usando la funzione timer che aumenta la larghezza della "riga" di 10 pixel o così ogni 10 millisecondi fino alla lunghezza massima, in questo caso la finestra la lunghezza è raggiunta Ma puoi farlo efficacemente se imposti la larghezza in pixel, altrimenti verrà prodotto un brutto effetto di zoom in uscita.

Speranza che aiuta, Ashwin

Answer 3

Non c'è modo pulito di fare questo. Ma chi ha bisogno di pulizia?

Non consiglierei di mescolare le larghezze fisse e fluide, ma se lo siete, potreste aver bisogno di query multimediali (un sacco di polyfill disponibili per IE). È quindi possibile verificare se il contenitore è più piccolo di X, nel qual caso si riorganizza il layout (1/3 per tutte le colonne o solo tutto verticale ecc.).

L'esempio è un po 'strano però. Cosa c'è in tutto lo spazio bianco nel mezzo? Qual è il contenuto?

PS. Non utilizzare min-width. Ciò invalida l'intera reattività.

Answer 4

ho avuto un problema simile in cui avevo bisogno di avere una larghezza fissa colonna di sinistra (struttura dei menu), ma hanno la colonna di destra ridimensionare responsively come il browser è stato ridotto.

Ho finito per implementare alcune query multimediali aggiuntive (erano già in grado di gestire altri casi limite) e ho trovato la larghezza percentuale della colonna a destra che funzionava per quella media query. Questo "salta" leggermente (ho usato solo 2 "media" extra query su quelle standard del palmare/tablet/desktop) ma a tutte le risoluzioni intermedie non si interromperà alla riga successiva. In effetti, stai modificando il contesto in ogni query multimediale prima che si possa rompere. Altre query multimediali equivarrebbero a interruzioni più uniformi man mano che il browser viene ridimensionato.

Sto bene con i salti perché non sto costruendo per il caso d'uso di qualcuno che ridimensiona il browser, ma piuttosto per assicurarsi che funzioni in modo accettabile su diversi dispositivi di risoluzione.

Un avvertimento, quando si calcola la larghezza percentuale della colonna di destra, la larghezza di base utilizzata è la larghezza della query multimediale in cui ci si trova, non la larghezza originale. Inoltre, è necessario utilizzare la larghezza minima e utilizzare la dimensione che funziona con la minima risoluzione per ogni sezione di query multimediale.

/* 641+ */ 
@media all and (min-width:641px) { 
    .itemDetailLanding { 
     width: 58.81435257410296%; /* 377/641 */ 
    } 
} 
/* 725-768 */ 
@media all and (min-width: 725px) { 
    .itemDetailLanding { 
     width: 63.44827586206897%; /* 460/725 */ 
    } 
} 
/* 769+ */ 
@media all and (min-width: 768px) { 
    .itemDetailLanding { 
     width: 65.625%; /* 504/768 */ 
    } 
} 
/* 860-990 */ 
@media all and (min-width: 860px) { 
    .itemDetailLanding { 
     width: 69.18604651162791%; /* 595/860 */ 
    } 
}  
/* 990+ */ 
@media all and (min-width:990px) { 
    .itemDetailLanding { 
     width: 74.04040404040404%; 
    } 
} 

Answer 5

Mi chiedo perché non usare le tabelle?

come:

<table class="row"> 
    <tr> 
     <td class="main"> 
     </td> 
     <td class="middle"> 
     </td> 
     <td class="sidebar"> 
     </td> 
    </tr> 
</table> 

E 'diventato molto semplice utilizzando layout di tabella, non ci sono JS, stessa altezza della colonna, la piena compatibilità con qualsiasi browser.

Ecco l'esempio: http://jsfiddle.net/nJ97q/162/

So tutti dicono che l'uso di tabelle è cattiva pratica, ma in realtà risolve tutti questi problemi.