newyorkas

divo turinio "išdėliojimas"

Recommended Posts

Parašė (redaguota)

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

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį

Parašė (redaguota)
.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

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį
Parašė (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

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
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

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį
Parašė (redaguota)

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

Dalintis šį pranešimą


Nuoroda iki šio pranešimo
Dalintis per kitą puslapį
Svečias
Ši tema yra užrakinta.

  • Šiame puslapyje naršo:   0 nariai

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

  • eneba
  • eneba
  • eneba



  • SuperGames programele
  • SuperGames programele