Forum » Programiranje » CSS "shrink to fit" center position + content left align
CSS "shrink to fit" center position + content left align
HotBurek ::
Dobro jutro.
Evo, nov dan, nov izziv.
Tokrat okrog CSS-ja.
Rad bi, da se "middle" div (zelen border, oranžna barva) raztegne zgolj toliko, kot je širina elementov, ki po širini lahko gredo v eno vrsto. Se pravi, neke vrste shrink to fit content.
Ter, da so "leaf" elementi znotraj "middle" elementa alignani left.
Spodaj html primer in slika.
Evo, nov dan, nov izziv.
Tokrat okrog CSS-ja.
Rad bi, da se "middle" div (zelen border, oranžna barva) raztegne zgolj toliko, kot je širina elementov, ki po širini lahko gredo v eno vrsto. Se pravi, neke vrste shrink to fit content.
Ter, da so "leaf" elementi znotraj "middle" elementa alignani left.
Spodaj html primer in slika.
<!DOCTYPE html>
<html>
<head>
<title>center</title>
<style>
#root {
display: inline-block;
margin: auto;
text-align: center;
background-color: red;
padding: 20px;
border: 5px solid black;
width: 400px;
overflow: auto;
}
#middle {
border: 5px solid green;
padding: 10px;
text-align: left;
margin: auto;
display: inline-block;
background-color: orange;
}
#middle_v2 {
border: 5px solid green;
padding: 10px;
text-align: left;
margin: auto;
display: inline-block;
background-color: orange;
width: 290px;
}
.element {
display: inline-block;
width: 100px;
background-color: gray;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body style="text-align: center;">
<div id="root">
<div id="middle">
<div class="element">test1</div>
<div class="element">test2</div>
<div class="element">test3</div>
</div>
</div>
<div id="root">
<div id="middle_v2">
<div class="element">test1</div>
<div class="element">test2</div>
<div class="element">test3</div>
</div>
</div>
</body>
</html>root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
- spremenilo: HotBurek ()
HotBurek ::
Evo, zadevo sem po nekaj urah rešil s pomočjo spletnega pomočnika.
Sem se trudil zadevo rešit old school, a ni šlo. Tako da sem se upognil, sicer za mene, neželjeni moderni tehnologiji (čeprav, sedajle ko razmišljam, niti nisem ziher.. gird, flex.. ?... i dont know). V glavenm, ni šlo drugače.
Hint: display: gird in grid-template-columns: ...
Primer: svinjska mast
Sem se trudil zadevo rešit old school, a ni šlo. Tako da sem se upognil, sicer za mene, neželjeni moderni tehnologiji (čeprav, sedajle ko razmišljam, niti nisem ziher.. gird, flex.. ?... i dont know). V glavenm, ni šlo drugače.
Hint: display: gird in grid-template-columns: ...
Primer: svinjska mast
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
socialec ::
Super! Ne vem, če bi se komu ljubilo spreminjati ali v ai kopirati, potem pa še testirati. Ne vem, če je črta med artiklom in med ceno dobro, da je enaka tisti med artikli, če nisi vajen in skrolaš po Y, da prej ali slej izgubiš vrh. Videti je, da imaš fiksno dimenzije v px tabele v prototipu, niti O od odzivno oblikovanje? Monospace font je kakšna osebna preferenca?
Zgodovina sprememb…
- spremenilo: socialec ()
RedDrake ::
Eno je retro izgled (kar je komot kul). Drugo je retro način kode, s fiksnimi px vrednostmi in podobno, kar sodi v čas ko je bila resolucija v 99% ali 1024x768 ali pa 1280x960 in ne v današnji čas kjer to rezultira v neuporabni/nepregledni spletni strani na zagotovo več kot 2/3 obiskov ...
Zgodovina sprememb…
- spremenil: RedDrake ()
HotBurek ::
Evo.
Backend - frontend podatki so zvezani.
Zdej moram samo še olepšat zadevo.
Aja, pa search moram še naredit. Sem skoraj že pozabil na to...
Pol bom dal pa na public.
Kasneje pa sledi ročno match-anje. Z namenom primerjave cen istih izdelkov, ane.
Je pa to v sklopu drugega, nišnega projekta.
Bom sporočil, ko bo tako daleč, da bo za probat.
Backend - frontend podatki so zvezani.
Zdej moram samo še olepšat zadevo.
Aja, pa search moram še naredit. Sem skoraj že pozabil na to...
Pol bom dal pa na public.
Kasneje pa sledi ročno match-anje. Z namenom primerjave cen istih izdelkov, ane.
Je pa to v sklopu drugega, nišnega projekta.
Bom sporočil, ko bo tako daleč, da bo za probat.
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window
Zgodovina sprememb…
- spremenilo: HotBurek ()
Vredno ogleda ...
| Tema | Ogledi | Zadnje sporočilo | |
|---|---|---|---|
| Tema | Ogledi | Zadnje sporočilo | |
| ! | Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )Oddelek: Izdelava spletišč | 360750 (19887) | sunniegoldie |
| » | Kako narediti to stran "resposive"?Oddelek: Izdelava spletišč | 1117 (1008) | zzbil |
| » | Prikaz strani na različni resoluciji-JoomlaOddelek: Izdelava spletišč | 2101 (1829) | kr?en |
| » | meni razporejen po celotni dolžiniOddelek: Izdelava spletišč | 2385 (2253) | XzupanX |
| » | CSS problemi (strani: 1 2 )Oddelek: Izdelava spletišč | 10236 (8035) | nuuush |