Responsive margin és padding létezik? Hogy használjam ebben az esetben?
Három boxom floatol egymás mellé alapesetben:
.box0 {width:30%;
background-color:white;
height:400px;
margin:auto 0px auto 0px;
padding:10px 20px 0px 20px;
float:left;
}
(A boxok egy 1200px szélességet vesznek fel együtt.)
@media only screen
and (min-width :800px)
and (max-width : 1120px) {
.box0 {PADDING:?}
}
Azt szeretném, hogy ebben a felbontásban is egymás mellett legyen a három box, margin ne legyen közöttük, de a padding annyival csökkenjen, hogy beférjenek egymás mellé. A jelenlegi paddingnél nem férnek el egy sorban. hogy tudnám arányosan csökkenteni?
Köszi
válasza: válasza:A bootstrap, ha nem értesz hozzá valóban célszerűbb lenne. DE! úgy nem tanulsz semmit.
Amit javaslok jelen esetben a box-sizing: border-box; attribútum. Ennek hatására a blokk elem méret értékeibe nem számolódik bele a padding és a border szélessége.
Erre egyébként több jó megoldás is van, javasolnám például a konténerekbe ágyazást. vagyis hogy maguknak a floatoló osztó konténereknek ne adj se paddingot se margint, azt csak a bennü lévő elemek kapjanak, így elkerülheted ezt a mizériát.
Célszerű lenne megismerkedned az inline-block típussal, ezeket float nélkül egymás mellé pakolhatod, és kis trükközéssel könnyebben módosítható a sorrendjük is egy soron belül.
A másik nagyszerű dolog amit a css3 hozott be az életünkbe az pedig a flexbox. Sokkal varázslatosabb dolgokat lehet vele megoldani, mint az egyszerű floatolós blokk elemekkel. Sajnos csak az IE10+ támogatja, de ettől még nagyszerű. Nem véletlen, hogy a Bootstrap 4 már ezzel állítja elő a grid rendszerét.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!