Hoe de hoogte van een div in te stellen in css en html

Ik gebruik Twitter Bootstrap. Ik schreef in mijn html:

<div style="height:100px;" class="span12">
asdfashdjkfhaskjdf
</div>

Waarom is de hoogte geen 100px als ik die pagina open?


Voor het nageslacht was de originele code: <div height="100px">


Antwoord 1, autoriteit 100%

Gebruik voor het schrijven van inline styling:

<div style="height: 100px;">
asdfashdjkfhaskjdf
</div>

Inline-styling heeft een doel, maar wordt in de meeste situaties niet aanbevolen.

De meer “juiste” oplossing zou zijn om een apart CSS-blad te maken, dit in uw HTML-document op te nemen en vervolgens een ID of een klasse te gebruiken om naar uw div te verwijzen.

als je de bestandsstructuur hebt:

index.html
>>/css/
>>/css/styles.css

Vervolgens in uw HTML-document tussen <head>en </head>schrijft u:

<link href="css/styles.css" rel="stylesheet" />

Verander vervolgens uw div-structuur in:

<div id="someidname" class="someclassname">
    asdfashdjkfhaskjdf
</div>

In css kunt u naar uw div verwijzen vanuit de ID of de KLASSE.

Schrijf hiervoor:

.someclassname { height: 100px; }

OF

#someidname { height: 100px; }

Merk op dat als u allebei, degene die de bestandsstructuur komt, degene is die daadwerkelijk werkt.

Bijvoorbeeld … als je hebt:

.someclassname { height: 100px; }
.someclassname { height: 150px; }

In deze situatie zal de hoogte 150px zijn.

bewerken:

Om uw secundaire vraag van uw bewerking te beantwoorden, heeft u waarschijnlijk nodig overflow: hidden;of overflow: visible;. U kunt dit ook doen:

<div class="span12">
    <div style="height:100px;">
        asdfashdjkfhaskjdf
    </div>
</div>

Antwoord 2, Autoriteit 21%

<div style="height: 100px;"> </div>

of

<div id="foo"/> and set the style as #foo { height: 100px; }
<div class="bar"/> and set the style as .bar{ height: 100px;  }

Other episodes