Moi!
Miten HTML/CSS-koodiani pitäisi muokata, jotta saisin tällaisen tasaväleillä olevan X-kirjainten muodotelman?
X
X
X X
X
X X
X
XJa tässä tämä koodini, joka ei osaa tehdä X-kirjaimia tasavälein. Missähän vika piilee?
<div>
<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
</div>
<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
</div>
<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">
X
</div>
</div>
</div>Kätevämpää olisi pre-tagilla:
<pre>
X
X
X X
X
X X
X
X
</pre>Jos kuitenkin halusit kysyä, miten tehdään diveillä kolme saraketta, jotka on tasattu pystysuunnassa keskelle ja joiden sisällä elementit ovat yhtä isoja, voisit kokeilla taulukkotyylejä:
<!DOCTYPE html>
<style>
/* Uloimpana on taulukko. */
div.a {
display: table;
width: 100%;
}
/* Sarakkeet ovat soluja; taulukkoon tulee automaattisesti yksi rivi. */
div.c {
display: table-cell;
width: 33%;
vertical-align: middle;
border: 1px solid red;
}
/* Sisimmät ovat lohkoja. Minimikorkeus auttaa tasaisessa asettelussa. */
div.r {
display: block;
min-height: 3em;
border: 1px solid blue;
}
</style>
<div class="a">
<div class="c">
<div class="r">X</div>
<div class="r">X</div>
</div>
<div class="c">
<div class="r">X</div>
<div class="r">X</div>
<div class="r">X</div>
</div>
<div class="c">
<div class="r">X</div>
<div class="r">X</div>
<div class="r">X</div>
<div class="r">X</div>
</div>
</div>Kannattaa hieman miettiä, mitä kysyy, ja ASCII-piirrokseenkin voi piirtää elementtien reunoja. Oli ihan tuurista kiinni, että esimerkkisi ja HTML-koodisi tarkkaan luettuna antoivat jotain vinkkiä, mistä nuo X-kirjaimet tulevat. Kummallisista CSS-tyyleistäsi oli asian arvaamisessa enemmän haittaa kuin hyötyä.
CSS:n erottaminen HTML:stä on vähintäänkin järkevää, jotta koodia pystyy lukemaan.
voit tehdä myös ihan pelkillä leveyksillä ja korkeusmäärityksillä.
JSFiddle (X ja Kuvaesimerkit)
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
* { box-sizing: border-box; }
.width-100 {
width:100%;
}
.width-25 {
width: 25%;
}
.height-100 {
height:100%;
}
.height-50 {
height:50%;
}
.height-33 {
height:33.333333%;
}
.height-25 {
height:25%;
}
div {
display:inline-block;
border:1px solid #CCC;
margin-right: -4px;
text-align:center;
vertical-align:middle;
}
span {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}<div class="width-25 height-100"> <div class="width-100 height-100"><span>X</span></div> </div> <div class="width-25 height-100"> <div class="width-100 height-50"><span>X</span></div> <div class="width-100 height-50"><span>X</span></div> </div> <div class="width-25 height-100"> <div class="width-100 height-33"><span>X</span></div> <div class="width-100 height-33"><span>X</span></div> <div class="width-100 height-33"><span>X</span></div> </div> <div class="width-25 height-100"> <div class="width-100 height-25"><span>X</span></div> <div class="width-100 height-25"><span>X</span></div> <div class="width-100 height-25"><span>X</span></div> <div class="width-100 height-25"><span>X</span></div> </div>
Aihe on jo aika vanha, joten et voi enää vastata siihen.