Div reagiert nicht auf CSS

Question

Ich habe 3 divs erstellt, die nicht auf den css-Code reagieren. Ich wollte die Breite des Div bei maximal 30% machen, aber es ist viel größer angezeigt. Das Textfeld mit dem Namen der Bilder wird entsprechend der Größe skaliert, die Bilder und die Divs jedoch nicht.

Dies ist der HTML-Code:

<div id='item' align = center style='padding:40px; background-color:white;'> 
<div id='item_box'> 
<a href='travel.php?id=".$row['cityid']."&name=".$row['cityname']."'> 
<img class='cityimg' src='images/city/".($row['cityname']).".jpg'/></a> </div> 
<div id='item_cityname' align=center style='padding:15px; background-color:#004b79;' > ".$row['cityname']." </div> 
</div>" 

Und dies ist der CSS-Code:

#item{ 

max-width: 30%; 

} 

#item_box{ 
max-width: 30%; 
} 


#item_cityname{ 
max-width: 30%; 
} 

Answer 1

Verwenden Sie diesen Code

#item{ 

max-width: 30%; 

} 

#item_box{ 
max-width: 30%; 
} 


#item_cityname{ 
max-width: 30%; 
} 

Answer 2

einen Blick auf Ihre ID nehmen Sie bitte oder CLASS Definition in HTML oder CSS, sie stimmen nicht überein!

#item{ 
 

 
max-width: 30%; 
 

 
} 
 

 
#item_box{ 
 
max-width: 30%; 
 
} 
 

 

 
#item_cityname{ 
 
max-width: 30%; 
 
}

<div id='item' align = center style='padding:40px; background-color:white;'> 
 
    <div id='item_box'> 
 
    <a href='travel.php?id=".$row['cityid']."&name=".$row['cityname']."'> 
 
     <img class='cityimg' src='images/city/".($row['cityname']).".jpg'/> 
 
    </a>  
 
    </div> 
 
    <div id='item_cityname' align=center style='padding:15px; background-color:#004b79;' > ".$row['cityname']." 
 
    </div> 
 
</div>

Answer 3

Ihre CSS Ziele Klassen, aber Ihr Code verwendet IDs. Wenn Sie die IDs als Ziel verwenden möchten, verwenden Sie anstelle von . im CSS. Ändern Sie andernfalls id zu class im HTML.

Answer 4

Wie andere erwähnt haben, verwenden Sie IDs in Ihrem HTML, aber versuchen Klassen (.) In unserem CSS. Deshalb reagiert Ihr CSS nicht.

Haben die Bilder für die nicht skalierenden Bilder eine Breite, die größer ist als die Breite des div?

Eine Sache, die Sie versuchen könnten, ist Add-Max-Breite: 100%; und Höhe: Auto; in css zum img-Tag oder Sie können die spezifischen Bilder mit der ID oder Klasse zielen.

So etwas wie folgt aus:

img { max-width: 100%; height: auto; }

oder für das Bild in Ihr Code-Snippet

.cityimg { max-width: 100%; height: auto; }

Auf diese Weise Ihr Bild wird nie als der Behälter div breiter sein. Die Höhe: Auto hilft sicherzustellen, dass das Bild beim Skalieren seine Proportionen beibehält.

Und nur als eine Randnotiz, Ihre ID-Artikel, item_box und item_cityname scheinen ein wenig zu generischen, wie sie für alle 3 Ihrer divs verwendet würden, die einen Überprüfungsfehler für doppelte IDs verursachen würde. Ich würde vorschlagen, Klassen hinzuzufügen, die Sie auf alle 3 divs anwenden können und diese Klassen verwenden, um zu stylen.