Kirjautuminen

Haku

Tehtävät

Kilpailu

Putka Open 2025
Alkuerät ovat ohi.

Keskustelu: Nettisivujen teko: Divien etäisyys pystysuunnassa ja ongelma

xxmss [06.06.2016 20:35:19]

#

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
          X

Ja 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>

Metabolix [06.06.2016 20:54:28]

#

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.

groovyb [07.06.2016 02:32:29]

#

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>

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta