Responsive <div>'s

[Jens1986]

Hei

Hadde satt STOR pris på å få hjelp med dette. Jeg er totalt nybegynner, og har noe som bør være et enkelt spørsmål.

Jeg skal ha en side med forskjellige bokser med en bredde på 200px i. Disse skal være i et rutenett, med så mange som det er plass til på skjermen i bredden.

Foreløpig har jeg følgende kode. Da får jeg så mange bokser jeg vil ha i bredden, men de er ikke responsive når skjermen blir smalere. Er det noen som kan vise meg hvordan jeg får de til å stacke i høyden etter hvert som skjermen blir smalere?

.box {
  background-color:black;
  width: 200px;
  display:inline-block;
  margin:10px 0;
  border-radius:5px;
  border:1px;
}
.text {
  padding: 10px 0;
  color:white;
}
#container {
  white-space:nowrap;
  text-align:center;
}
<div id="container">
    <div class="box">
        <div class="text">1</div>
    </div>
    <div class="box">
        <div class="text">2</div>
    </div>
    <div class="box">
        <div class="text">3</div>
    </div>
</div>

På forhånd tusen takk!

 

[adeneo]

Du fjerner

white-space:nowrap;

 

[spikre]

Jeg bruker ofte float:left; til slikt

 

[Jens1986]

Takk for svar, det fungerte bra

Da er mitt neste spørsmål:

Når jeg fyller disse boksene med innhold, så blir de forskjellig høyde. Er det mulig å endre dette slik at de starter like høyt og heller får ulik lengde nedover (i stedet for oppover)?

Klønete forklart..

 

[adeneo]

Jepp, legg til vertical-align på boksene

.box {
   background-color:black;
   width: 200px;
   display:inline-block;
   margin:10px 0;
   border-radius:5px;
   border:1px;
   vertical-align: top;
}