div automatisch die Größe Stellen

Question

I div

 <div class="PF"> 
        <img src="img" class="FollowerPic"> 
        <span>Name</span> 
        <div class="Text"></div> 
       <div class="readURL"> 
        <img src="../img/x.png" class="closeP"> 
        <img src="" class="readIMG"></div> 
       </div> 
    </div> 

Jetzt mit Klasse „Text“ und Bild mit Klasse „readIMG“ sind definiert durch Benutzer div können sie 100px oder 500 px Höhe sein bekommen haben.

.PF{ 
    width: 600; 
    height: auto; 
    overflow: hidden; 
    min-height: 500; 
    span{ 
     position: absolute; 
     font-family: sans-serif; 
     font-size: 32; 
     margin-left: 140; 
     margin-top: 50; 
    } 
} 

.readURL{ 
    margin-left: -19; 
    margin-top: 100; 
    width: 300; 
    height: 260; 
    position:absolute; 
    border-bottom-right-radius: 8px; 
    border-top-right-radius: 8px; 
    display: none; 
    .readIMG{ 
     width:600px; 
     // position:@Abs; 
     margin:-55 19 100; 
     height: inherit; 
    } 
    .closeP{ 
     position:@Abs; 
     width: 40; 
     margin-left: 180%; 
     cursor:pointer; 
    } 
} 

Ich habe diesen Code in die div Elternteil versucht, aber es will nicht, es bleibt die gleiche Höhe

Answer 1

Versuchen Sie Folgendes:

.PF{ 
    width: 600px; 
    height: auto; 
    overflow: hidden; 
    } 
.PF span { 
    font-family: sans-serif; 
    font-size: 32px; 
    margin-left: 140px; 
    margin-top: 50px; 
    } 

Es ist gute Praxis Maßeinheiten für Ihre CSS-Eigenschaften oder Browser zu verwenden, werden die Elemente mit Standard-Messwerte machen:

http://www.tutorialspoint.com/css/css_measurement_units.htm

Answer 2

Sie benötigen, um die Größe der Einheiten einzustellen.

Zum Beispiel:

.PF{ 
    width: 600px; 
    height: auto; 
    overflow: hidden; 
    min-height: 500px; 
} 

Answer 3

Sie vergaßen „px“ für Höhe und Breite

https: //plnkr.co/edit/qr1gUaeeWeLARIVDPg5B?p=preview 

Answer 4

Wenn Sie die divs Auto ändern möchten würde dies bedeuten würde, der Bildschirm wollen Bildschirm anzupassen Größe ändern oder sogar auf verschiedene Bildschirme passen . Versuchen Prozent- und Medien-Anfragen anzuwenden, um zu arbeiten,

dh

.PF{ 
    min-width:100px; 
    width:100%; 
    max-width: 600px; 
    height: auto; 
    overflow: hidden; 
    min-height: 500px; 
    height: 100%; 
} 

Und die Bilder, die Sie folgen, um Anzug Prozent auf die auch

dh

<div class="PF"> 
       <img src="img" style="width:100%;" class="FollowerPic"> 
       <span>Name</span> 
       <div class="Text">.... 

beantragen

Alternativ: wenn Sie die Höhe auf 100% einstellen; es schaut auf die Elterngröße. Eine Möglichkeit, dies zu tun, ist, dem Kind nicht einmal eine Körpergröße von 100% zu geben, aber ich könnte auch vorschlagen, dass Sie dem Elternteil einen relativen Positionsstil und dem Kind eine absolute Position geben. dann erzwingen Sie es für den Elternteil. dh

<style> 
 
.parent 
 
{ 
 
\t height:100%; 
 
\t min-height:500px; 
 
\t position:relative; 
 
\t display:block; 
 
\t border:#093 solid 1px; \t \t 
 
} 
 

 
.PF 
 
{ 
 
\t background-color:#999; 
 
\t border:#939 solid 1px; 
 
\t height:100%; 
 
\t bottom:0; 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t top:0; 
 
\t left:0; 
 
\t right:0; 
 
\t display:block; 
 
} 
 

 
</style> 
 

 

 
<!--The parent--> 
 
<div class="parent"> 
 

 
<!--The child--> 
 
    <div class="PF"> 
 
        <img src="img" class="FollowerPic"> 
 
        <span>Name</span> 
 
        <div class="Text"></div> 
 
        <div class="readURL"> 
 
        <img src="../img/x.png" class="closeP"> 
 
        <img src="" class="readIMG"></div> 
 
        </div> 
 
    
 
    </div> 
 
</div>