Peršokti į turinį
  • ŽAIDIMAI
  • , ŽAIDIMAI
  • ŽAIDIMAI

divo turinio "išdėliojimas"


newyorkas

Ši tema yra neaktyvi. Paskutinis pranešimas šioje temoje buvo prieš 1547 dienas (-ų). Patariame sukurti naują temą, o ne rašyti naują pranešimą.

Už neaktyvių temų prikėlimą galite sulaukti įspėjimo ir pranešimo pašalinimo!

Recommended Posts

kokiu būdu būtų galima gražiai alignint divo content'ą?

buvau padaręs su paddingais, marginais, bet turinio dydis nesikeitė resizinant langą ir t.t.

image.thumb.png.89003ecede4692136d49532bfedb248c.png

 

<html>

<div class="photos">
	<div class="photo">
		<img src="/slideshow/1.jpg">
	</div>
	<div class="photo">
		<img src="/slideshow/2.jpg">
	</div>
	<div class="photo">
		<img src="/slideshow/3.jpg">
	</div>
</div>

<css>
 

.photos {
    display: inline-flex;
    margin: auto;
}
.photo{
    width: 500px;
}

 

Redaguota , nario newyorkas
Nuoroda į komentarą
Dalintis per kitą puslapį

.photo {
    width: 500px;
    margin-left: (100% - (500px * 3)) / 4;
}

Nežinau ant kiek legit ir ar veiks šitas reikalas, but give a try.

EDIT: Išgooglinau šiek tiek padoresnį būdą.

.photos {
    display: flex;
    justify-content: center;
}
Redaguota , nario KasparasDope
  • Teigiamai 1
Nuoroda į komentarą
Dalintis per kitą puslapį

(redaguota)
24 minutes prieš, KasparasDope parašė:

.photos {
    display: inline-flex;
    margin-left: (100% - (500px * 3)) / 4;
}

Nežinau ant kiek legit ir ar veiks šitas reikalas, but give a try.

giphy.gif

 

nieko...:D

 

24 minutes prieš, KasparasDope parašė:

EDIT: Išgooglinau šiek tiek padoresnį būdą.


.photos {
    display: flex;
    justify-content: center;
}

va, su justify daug geriau, viskas kaip ir normaliai :D

pačios nuotraukos reikiamose vietose "sėdi", tik su borderiais grybauja šiek tiek.
any ideas why?

image.thumb.png.6673a5fb36a956c6a6ee29b04a9ba365.png

.photos {
    display: flex;
    justify-content: center;
    margin-left:120px;
}
.photo{
    width: 100%;
    height: auto;
    max-width: 50vw;
    border: 1px solid #ccc;
}

 

Redaguota , nario newyorkas
Nuoroda į komentarą
Dalintis per kitą puslapį

34 minutes prieš, newyorkas parašė:

giphy.gif

 

nieko...:D

 

va, su justify daug geriau, viskas kaip ir normaliai :D

pačios nuotraukos reikiamose vietose "sėdi", tik su borderiais grybauja šiek tiek.
any ideas why?

image.thumb.png.6673a5fb36a956c6a6ee29b04a9ba365.png


.photos {
    display: flex;
    justify-content: center;
    margin-left:120px;
}
.photo{
    width: 100%;
    height: auto;
    max-width: 50vw;
    border: 1px solid #ccc;
}

 

Nedraugauja su borderiais, nes neturi jokio margino photo klasėje. Pabandyk margin: auto; panaudoti photo klasėje.

  • Teigiamai 1
Nuoroda į komentarą
Dalintis per kitą puslapį

Kam gi naudoti tą flex?

img {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

#photos {
    width: 100%;
    padding: 10px;
    text-align: center;
    display: table;
}

.photo {
    width: tavoplotis;
    height: ilgis;
    display: inline-block;
    position: relative;

}

 

<div id="photos">

<div class="photo"><img src="kelias" alt="Image, .PNG"</div>

ir t. t.

</div>

Į #photos gali įmesti background: #FFFFFF;

O .photo – margin-right: 10px ir bus tavo tie vargini borderiai.

Redaguota , nario NTQ
  • Teigiamai 2
  • Neigiamai 1
Nuoroda į komentarą
Dalintis per kitą puslapį

Ši tema yra neaktyvi. Paskutinis pranešimas šioje temoje buvo prieš 1547 dienas (-ų). Patariame sukurti naują temą, o ne rašyti naują pranešimą.

Už neaktyvių temų prikėlimą galite sulaukti įspėjimo ir pranešimo pašalinimo!

Svečias
Ši tema yra užrakinta.
  • Šiame puslapyje naršo:   0 nariai

    • Nėra registruotų narių peržiūrinčių šį forumą.

Skelbimai


×
×
  • Sukurti naują...