Drei Bilder mit etwas Abstand nebeneinander anordnen

web334 · #1 (**permalink**) 04.02.2012, 15:22

ich möchte drei Bilder mit etwas Abstand zueinander nebeneinander anordnen, aber leider funktioniert das noch nicht.
Alle drei Bilder befinden sich in einem div. Jedes der Bilder sollte eine Breite von 33.2 Prozent haben. Und der Abstand der Bilder sollte zum Beispiel 11px betragen. Dabei ist es mir egal ob das mit margin oder mit padding gelöst wird. Ich habe zwar schon beides probiert, aber ohne Erfolg.
Wäre wirklich super, wenn mir jemand weiterhelfen könnte.
Mein Beispiel ist hier zu finden http://bit.ly/w8A8K4

Manfred62 · #2 (**permalink**) 04.02.2012, 16:56

das widerspricht sich. Was genau soll raus kommen?
Nimm mal img aus dem CSS raus.

Zitat:

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

<img width="68" height="35" alt="" src="1.jpg">

Manfred62 · #3 (**permalink**) 05.02.2012, 10:28

hier eine einfache Variante

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
* {padding: 0; margin: 0;}

body {
 background: #fff;
 padding: 30px;
}

#banner3 {
 width: 100%;
 max-width: 900px;
 background: #7e8726;
  margin: 0 auto;
}

.tri {
 float: left;
 width: 33.3%;
}

.tri img {
 width: 93%;
 margin: 11px 3%;
 border: 1px solid #ccc;
}

.clear {
 clear: both;
}
</style>
</head>
<body>

<div id="banner3">
<div class="tri"><img src="1.jpg" alt="" /></div>
<div class="tri"><img src="1.jpg" alt="" /></div>
<div class="tri"><img src="1.jpg" alt="" /></div>
<div class="clear"></div>
</div>

</body>
</html>

web334 · #4 (**permalink**) 05.02.2012, 15:09

Recht herzlichen Dank für deine Antwort. Diese habe mich auf eine andere Lösung gebracht. Und zwar folgende:

Code:

#banner3 { 
	width: 100%;
	max-width: 900px;
	border: 0;
	margin-bottom: 26px;
	background: #7e8726; 
}
.tri {
	position: relative;
	width: 33.33%;
	margin: 0;
	padding: 0;
	float: left; 
	text-align: center;
}
.tri img {
	max-width: 90%;
	vertical-align: bottom;
	border: 1px solid #CCC;
	box-shadow: 5px 5px 5px #666; 
}

sorry für die schlechte Beschreibung.
Ein schönes Wochenende euch allen noch.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder mit Beschriftung anordnen	snaps	CSS	4	15.03.2011 20:06
3 Bilder in einem DIV anordnen (links, mittig, rechts)	plegox	CSS	5	29.04.2010 18:28
bilder in div container unten anordnen	diegaby	CSS	12	17.11.2008 14:08
Bilder mit jeweils einem Untertitel folgend anordnen...	Baron	CSS	8	01.10.2007 22:51
Bilder und Text anordnen - Probleme mit Opera	soulson7	CSS	1	11.07.2005 19:49