Fast størrelse div?

stemmer
14

Jeg vil ha en normal div for kroppen min tekst og en haug med små divs som er nøyaktig 150px 150 piksler. Hvordan kan jeg gjøre dette?

Publisert på 30/12/2009 klokken 00:31
kilden bruker
På andre språk...                            


6 svar

stemmer
1
.myDiv { height: 150px; width 150px; }

<div class="mainDiv">
   <div class="myDiv"></div>
   <div class="myDiv"></div>
   <div class="myDiv"></div>
</div>
Svarte 30/12/2009 kl. 00:34
kilden bruker

stemmer
0

Du kan stille inn heightog widthdivsmed css.

<style type="text/css">
.box {
     height: 150px;
     width: 150px;
}
</style> 

Er dette hva du leter etter?

Svarte 30/12/2009 kl. 00:35
kilden bruker

stemmer
20

Dette er en ganske triviell effekt å oppnå. En måte å oppnå dette på er å bare plassere fløt divelementer innenfor en felles over beholder, og satt sin bredde og høyde. For å fjerne fløt elementer, setter vi overflowtilhører den overordnede.

<div class="container">
    <div class="cube">do</div>
    <div class="cube">ray</div>
    <div class="cube">me</div>
    <div class="cube">fa</div>
    <div class="cube">so</div>
    <div class="cube">la</div>
    <div class="cube">te</div>
    <div class="cube">do</div>
</div>

CSS ligner strategien skissert i første ledd:

.container {
    width: 450px;
    overflow: auto;
}

.cube {
    float: left;
    width: 150px; 
    height: 150px;
}

Du kan se sluttresultatet her: http://jsfiddle.net/Qjum2/2/

Weblesere som støtter pseudo-elementer tilveiebringe en alternativ måte for å tømme:

.container::after {
    content: "";
    clear: both;
    display: block;
}

Du kan se resultatene her: http://jsfiddle.net/Qjum2/3/

Jeg håper dette hjelper.

Svarte 30/12/2009 kl. 00:36
kilden bruker

stemmer
0
<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>

css:

.smallDiv { height: 150px; width: 150px; }
Svarte 30/12/2009 kl. 00:36
kilden bruker

stemmer
7

Du kan også hardt koden i dimensjonene i HTML-koden i motsetning til å sette de ønskede dimensjoner i et stilark

<div id="mainDiv">
    <div id="mydiv" style="height:150px; width:150px;">
    </div>
</div>
Svarte 30/12/2009 kl. 15:00
kilden bruker

stemmer
5

Som svar på Jonathan Sampson, er dette den beste måten å gjøre det, uten en lysning div:

.container { width:450px; overflow:hidden }
.cube { width:150px; height:150px; float:left }

<div class="container">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>
Svarte 30/12/2009 kl. 15:22
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more