Kann Bilder in divs nicht bearbeiten css

Ich versuche, eine Website zu erstellen, und ich mache eine Sammlung von Bildern, die ich in einer Reihe mit einem Rand von etwa 20 Pixel sein möchte (die Bilder sind in einem div das ist wiederholt für so viele Bilder gibt es). Wenn ich den Code ausführe, erscheinen die Bilder in einer merkwürdigen Konfiguration, in der sie scheinen, geschichtet zu sein. Wenn ich 'img' zur Div-Klasse hinzufüge, erscheinen die Bilder dann in einer Spalte, die nicht das ist, was ich will. Ich habe ein sehr einfaches Website-Beispiel mit drei wiederholten Bildern erstellt, die ich hintereinander haben möchte. In früheren Websites konnte ich die Bilder in einer Reihe erscheinen lassen (so wie ich es möchte), aber jetzt wird das einfach nicht funktionieren. Ich werde meinen Code bereitstellen. Jede Hilfe würde geschätzt werden :).Kann Bilder in divs nicht bearbeiten css

<!DOCTYPE html> 
<html> 

<head> 
    <title>Home</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 

    <body> 

     <div class="heading"> 
      <h1>Test</h1> 
     </div> 

     <div class="image"> 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
     </div> 

     <div class="image"> 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
     </div> 

     <div class="image"> 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
     </div> 

    </body> 

</html>

Aktualisiert korrekte CSS:

.image{ 
    display: inline-block; 
    width: 333px; 
    height: 250px; 
    margin: 50px; 
} 

    .image img { 
    width:100%; 
    height: 100%; *addition made by myself*

UPDATE Wenn ich die bearbeitete Code ausführen und fügen Sie 6 Bilder die Größe von Bildern nicht. Gibt es eine Lösung für dieses Problem?

UPDATE Hinzufügen von Höhe: 100%; scheint das Problem gelöst zu haben. Ich werde die Frage aktualisieren, um alle Schritte zur Lösung des Problems zu planen.

Quelle

2016-07-24 rmce

müssen wissen, was das Sheet 'ist main.css' – zer00ne

Das Stylesheet ist die 'CSS' Teil über – rmce

können Sie den Link posten? –

Fügen Sie einfach .image img {width:100%;} so dass die Bilder ihre gesamte Mutter div abdecken wird und wird nicht

.image{ 
 
    display: inline-block; 
 
    width: 333px; 
 
    height: 250px; 
 
    margin: 20px; 
 
} 
 

 
.image img { 
 
    width:100%; 
 
} 
 

 
.heading{ 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Home</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 

 
    <body> 
 

 
     <div class="heading"> 
 
      <h1>Test</h1> 
 
     </div> 
 

 
     <div class="image"> 
 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
     </div> 
 

 
     <div class="image"> 
 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
     </div> 
 

 
     <div class="image"> 
 
      <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
     </div> 
 

 
    </body> 
 

 
</html>

Quelle

2016-07-24 21:02:19 splunk

Danke für Ihre Hilfe! Dies hat mein Problem gelöst, obwohl ich nicht weiß, warum ich mein gewünschtes Ergebnis auf meinen vorherigen Websites ohne diesen Code erreichen konnte – rmce

Hallo überlappt werden überprüfen, ob ok ist?

.image img{ 
 
    display: inline-block; 
 
    width: 333px; 
 
    height: 250px; 
 
    margin: 20px; 
 
} 
 

 
.heading{ 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Home</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
<body> 
 

 
<div class="heading"> 
 
<h1>Test</h1> 
 
</div> 
 

 
<div class="image"> 
 
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
</div> 
 

 
<div class="image"> 
 
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
</div> 
 

 
<div class="image"> 
 
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg"> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2016-07-24 21:04:58

Kann Bilder in divs nicht bearbeiten css

Antwort

Verwandte Themen