CSS asettelu - kelluva esimerkki

Tämä sivu tarjoaa yleisiä liikkuvia esimerkkejä.

Verkko / tasaiset kehykset

Box 1
Box 2
Box 1
Box 2
Box 3

Käyttämällä float Ominaisuus mahdollistaa liikkuvien sisällökehysten rinnakkaisen asettamisen:

esimerkki

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Kolme kehyksiä (neljä kehyksiä käyttää 25%, kaksi kehyksiä käyttää 50%, ja niin edelleen) */
  padding: 50px; /* Jos haluat lisätä välit kuvien välillä */
}

Kokeile itse

Mitä box-sizing on?

Voit helposti luoda kolme rinnakkaisia liukuvaa kehyksiä. Mutta kun lisäät sisältöä, joka laajentaa jokaisen kehyksen leveyttä (esim. sisennykset tai reunaviivat), tämä kehyke rikkoutuu. box-sizing Ominaisuus sallii meidän sisällyttää kehyksen kokonaisleveyteen (ja korkeuteen) sisennykset ja reunaviivat, varmistaen, että sisennykset pysyvät kehyksissä eivätkä rikkoudu.

Voit tutustua meidän CSS Box Sizing Tässä luvussa oppisit lisää box-sizing ominaisuudesta.

Kuvat rinnakkain

Tämä kehykkipuari (The grid of boxes) voidaan käyttää kuvien rinnakkaisessa näyttämiseen:

esimerkki

.img-container {
  float: left;
  width: 33.33%; /* Kolme kehyksiä (neljä kehyksiä käyttää 25%, kaksi kehyksiä käyttää 50%, ja niin edelleen) */
  padding: 5px; /* Jos haluat lisätä välit kuvien välillä */
}

Kokeile itse

Tasaiset kehykset

Esimerkissä oppisit, miten tasaisella leveydellä asettuu liukuvat kehykset. Mutta, yhtä korkeiden liukuvien kehykset eivät ole helppoja luoda. No, nopea ratkaisu on asettaa kiinteä korkeus, kuten seuraavassa esimerkissä näkyy:

Box 1

Joitakin sisältöä, joitakin sisältöä, joitakin sisältöä

Box 2

Joitakin sisältöä, joitakin sisältöä, joitakin sisältöä

Joitakin sisältöä, joitakin sisältöä, joitakin sisältöä

Joitakin sisältöä, joitakin sisältöä, joitakin sisältöä

esimerkki

.box {
  height: 500px;
}

Kokeile itse

Mutta, tällä tavalla menetät joustavuuden. Jos voit taata, että laatikossa on aina sama määrä sisältöä, se voi olla hyvä ratkaisu. Mutta usein sisältö on erilaista. Jos kokeilet yllä olevaa esimerkkiä puhelimessa, huomaat, että toisen laatikon sisältö näkyy laatikon ulkopuolella. Tämä on paikka, jossa CSS3 Flexbox näyttää hyvältä - koska se voi automaattisesti venyttää laatikon, jotta se on yhtä pitkä kuin pisimmäinen laatikko:

esimerkki

Luo joustavuus Flexboxilla:

Box 1 - Tämä on joitakin tekstejä, jotta varmistetaan, että sisältö on todella korkeaa. Tämä on joitakin tekstejä, jotta varmistetaan, että sisältö on todella korkeaa. Tämä on joitakin tekstejä, jotta varmistetaan, että sisältö on todella korkeaa. Tämä on joitakin tekstejä, jotta varmistetaan, että sisältö on todella korkeaa. Tämä on joitakin tekstejä, jotta varmistetaan, että sisältö on todella korkeaa.
Box 2 - Korkeuteni seuraa Box 1.

Kokeile itse

Flexboxin ainutlaatuinen ongelma on, että se ei toimi Internet Explorer 10 tai aikaisemmissa versioissa. Voit tarkistaa tämän sivustoltamme: CSS Flexbox Oppimalla lisää Flexbox-työkalusta tästä luvusta.

Navigointivalikko

Siirrä float Käytä yhdessä hyperlinkkiluetteloa luodaksesi horisontaalisen valikon:

esimerkki

Kokeile itse

Web-työn esimerkki

Käytä float Ominaisuudet saattavat usein suorittaa koko Web-työn asettamisessa:

esimerkki

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Kokeile itse

Lisää esimerkkejä

Reunaviivalla ja ulkoreunalla varustettu kuva liukautuu kappaleen oikealle
Aseta kuva liukautumaan kappaleen oikealle. Lisää reunaviiva ja ulkoreuna kuvan ympärille.
Otsikollinen kuva liukautuu oikealle
Aseta otsikollinen kuva liukautumaan oikealle.
Aseta kappaleen ensimmäinen kirjain liukautumaan vasemmalle
Aseta kappaleen ensimmäinen kirjain liukautumaan vasemmalle ja määritä kyseisen kirjaimen tyyli.
Luo verkkosivusto liukautumalla
Luo etusivu, jossa on horisontaalinen navigointirivi, otsikko, alatunniste, vasen navigointirivi ja pääsisältö käyttämällä liukautumista.

Kaikki CSS-poisliukuvat ominaisuudet

ominaisuus kuvaus
box-sizing Määritä elementin leveys ja korkeuden laskentatapa: niiden tulisi sisältää sisätilat ja reunaviivat.
clear Määritä, mitkä elementit voivat liukua poissa poistettavasta elementistä ja missä puolella.
float Määritä, miten elementti liukuu.
overflow Määritä, mitä tapahtuu, jos sisältö ylittää elementin reunat.
overflow-x Määritä, miten käsitellään ylitystietoja, kun elementin sisältöalue ylittää elementin leveyden.
overflow-y Määritä, miten käsitellään ylitystietoja, kun elementin sisältöalue ylittää elementin koon.