CSS: Very simple image gallery

Ich nicht immer tun, web-Entwicklung, aber wenn ich CSS ist die am meisten frustrierend, was ich mir vorstellen kann. Ich bin versucht, zu erstellen eine einfache Klasse zu halten ein Bild zusammen mit der Beschreibung. Ich will zwei Zeilen mit je drei Bildern. Sehr einfach.

Hier ist mein code für die Anzeige der Bilder nur, und das funktioniert ok.

img {
  position: relative;
  margin: 0 auto;
  max-width: 650px;
  padding: 5px;
  margin: 10px 0 5px 0;
  border: 1px solid #ccc;  
}

<h3>Screenshots</h3>

<p>
<a href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
<a href="images/img2.png"><img src="images/img2.png" width="200" height="140"></a>
<a href="images/img3.png"><img src="images/img3.png" width="200" height="140"></a>
<a href="images/img4.png"><img src="images/img4.png" width="200" height="140"></a>
<a href="images/img5.png"><img src="images/img5.png" width="200" height="140"></a>
<a href="images/img6.png"><img src="images/img6.png" width="200" height="140"></a>
</p>


<h3>Installation</h3>

Diese zeigt die Bilder genau so, wie ich will, drei in jeder Reihe, und dann gibt es ein padding von < p > und dann Installation Abschnitt. Bekommen Beschreibung unter Bilder in der gleichen div änderte ich die img in der css-div.img-und htm-code:

<h3>Screenshots</h3>

<p>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
</p>

<h3>Installation</h3>

Einer hätte gedacht, dass die resultierende Webseite wird genau das gleiche wie img in den ersten Fall und div.img in der zweiten die gleichen Attribute haben. Es ist nicht der Fall, obwohl. Mit diesem code bekomme ich die einzelnen div-gestreckt auf die volle Breite der Spalte und die Bilder werden unter die anderen auf der linken Seite des div.

Habe ich auch schon versucht diesen code: http://www.w3schools.com/CSS/css_image_gallery.asp, aber in diesem Fall bekomme ich Installation und alle den text, der folgt, gehen Sie auf die Bilder, ignorieren < p > - tag, die hat am unteren Rand.

Bitte stellen Sie jsfiddle, und ich werde alles machen für dich arbeiten 🙂
i.stack.imgur.com/XyURM.jpg
das ist genau das, was mir in den Sinn kam, als ich Las, der erste Satz!
Hier gehen Sie, dass fast funktioniert, aber wie Sie sehen, "Installation" der text geht auf die Bilder und < p > margin scheint nicht anzuwenden: jsfiddle.net/Znk9y

InformationsquelleAutor jaho | 2012-07-24

Schreibe einen Kommentar