Hvordan holde CSS Flyter Horisontal og ikke hoppe Vertical grunn av sidestørrelse

Skjermstørrelser har vokst mye siden de tidlige dagene av Internett, men noen situasjoner være når en brukers nettleser kan ta knekken på en webside, slik som fløt deler av siden pakk ned i en ny rad. Slike situasjoner omfatter når brukeren fliser lesere på skjermen hans eller viser siden på en mobil nettleser. Med mindre du ønsker å bruke ekstra tid på å lage en mer "responsive" design som tilpasser seg ulike skjermstørrelser, det er en annen løsning. Lag en innpakning div rundt flyter og gi den et minimum bredde i CSS.

Bruksanvisning

1 Beregn bredden på hver fløt element du vil skal vises på én linje. Hvis dette er en rad med fem bokser som er 200 piksler bred hver, så den totale er 1000 piksler. Legg i venstre og høyre marg, så hvis boksene hver har en høyre marg på 10 piksler, som er 50 ekstra piksler.

2 Pakk flyter i en div eller finne en div som allerede inneholder dem:

<Div id = "wrapper">
<Div class = "box"> </ div>
<Div class = "box"> </ div>
<Div class = "box"> </ div>
<Div class = "box"> </ div>
<Div class = "box"> </ div>
</ Div>

Du trenger navnet ID for div å skrive CSS-kode som hindrer hopp. Hvis div ennå ikke har en ID, legge til en som vist i eksempelet ovenfor.

3 Skriv en stil regel i stilarket, eller mellom et par av "<style>" koder i hodet av sidens HTML-kode. Inne i stil regelen, sett "min-width" eiendom til total bredde du beregnet for raden flyter:

wrapper {

min-width: 1050px;
}

Ved hjelp av "en minstebredde" lar omhyllingen div å strekke større enn 1050 piksler, men det kan aldri krympe til mindre enn denne verdien.