---
title: "CSS fyra bilder"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/86262-css-fyra-bilder"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Flashes"
published: "2003-09-17T10:50:30.000Z"
updated: "2003-09-18T13:44:14.000Z"
replies: 5
views: 217
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/86262-css-fyra-bilder"
---

# CSS fyra bilder

## #1 — Flashes, 2003-09-17T10:50Z

Vill göra så här

```
Bild 1 | | Bild 2
-------| |-------
-------| |-------
Bild 3 | | Bild 4
```

Jag vill alltså ha fyra bilder med ett kors i mellan.
Min sida ser ut så här, bara ett test

```
<html>
<head>
<style type="text/css">
.cont { position: relative;
	width: 150px;
	}
.vt {float: left;
	margin-bottom: 5px;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	padding: 2px;
	}
.ht { float: right;
	margin-left: 5px;
	margin-bottom: 5px;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	padding: 2px;
	}
.vb { float: left;
	border-right: 1px solid black;
	border-top: 1px solid black;
	padding: 2px;
	}
.hb { float: right;
	margin-left: 5px;
	border-left: 1px solid black;
	border-top: 1px solid black;
	padding: 2px;
	}
</style>
</head>

<body>
<div class="cont">
<div class="vt"><img src="vanster_top.jpg" alt="Vänster Top"></div>
<div class="ht"><img src="hoger_top.jpg" alt="Höger Top"></div>
<div class="vb"><img src="vanster_bot.jpg" alt="Vänster Botten"></div>
<div class="hb"><img src="hoger_bot.jpg" alt="Höger Botten"></div>
</div>
</body>
</html>
```

Det fungerar om jag sätter width i cont till rätt värde 2 x bildbredd + 10px
Men annar så hamnar bild 3 och 4 på samma rad som bild 1 och 2. Hur löser jag detta?

Mvh
Jan-Olov

Permalänk: https://www.webforum.nu/p/86262

## #2 — Palle, 2003-09-17T10:55Z

En variant: 

```
[red]<html>
<head>

    <style type="text/css">
    
    .vt {
    	float: left;
    	margin-bottom: 5px;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 2px;
    }
    
    .ht { 
    	float: left;
    	margin-left: 5px;
    	margin-bottom: 5px;
    	border-left: 1px solid black;
    	border-bottom: 1px solid black;
    	padding: 2px;
    }
    
    .vb { 
    	clear: left;
    	float: left;
    	border-right: 1px solid black;
    	border-top: 1px solid black;
    	padding: 2px;
    }
    
    .hb { 
    	float: left;
    	margin-left: 5px;
    	border-left: 1px solid black;
    	border-top: 1px solid black;
    	padding: 2px;
    }
    
    </style>

</head>
<body>

	<div class="vt"><img src="vanster_top.jpg" alt="Vänster Top"></div>
	<div class="ht"><img src="hoger_top.jpg" alt="Höger Top"></div>
	<div class="vb"><img src="vanster_bot.jpg" alt="Vänster Botten"></div>
	<div class="hb"><img src="hoger_bot.jpg" alt="Höger Botten"></div>

</body>
</html>[/red]
```

Permalänk: https://www.webforum.nu/p/1158161

## #3 — Flashes, 2003-09-17T11:03Z

Tyvärr, höger botten hamnar uppe bredvid höger topp.
Vänster botten hamnar däremot där den ska.

Mvh
Jan-Olov

Permalänk: https://www.webforum.nu/p/1158168

## #4 — Palle, 2003-09-17T12:14Z

Gör så här då: ;) 

```
[red]<html>
<head>

    <style type="text/css">
    
    .vt {
    	margin-bottom: 5px;
    	border-right: 1px solid black;
    	border-bottom: 1px solid black;
    }
    
    .ht {
    	margin-left: 5px;
    	margin-bottom: 5px;
    	border-left: 1px solid black;
    	border-bottom: 1px solid black;
    }
    
    .vb { 
    	border-right: 1px solid black;
    	border-top: 1px solid black;
    	padding: 2px;
    }
    
    .hb {
    	margin-left: 5px;
    	border-left: 1px solid black;
    	border-top: 1px solid black;
    }
    
    </style>

</head>
<body>

	<img src="vanster_top.jpg" alt="Vänster Top" class="vt"><img src="hoger_top.jpg" alt="Höger Top" class="ht"><br>
	<img src="vanster_bot.jpg" alt="Vänster Botten" class="vb"><img src="hoger_bot.jpg" alt="Höger Botten" class="hb">

</body>
</html>[/red]
```

Permalänk: https://www.webforum.nu/p/1158203

## #5 — Flashes, 2003-09-17T12:57Z

Jo jag började så, men då fungerar inte padding: 2px;
fast bilderna ligger ju som dom ska.
Linjen i krysset hamnar då dikt mot bilderna, det var därför jag la dom i en div.
Använde din kod för att styra divarna istället, då hamnade alla bilderna under varandra.

Mvh
jan-Olov

Permalänk: https://www.webforum.nu/p/1158225

## #6 — Flashes, 2003-09-18T13:44Z

Fick hjälp av mikkeX, så här är resultatet om någon är intresserad.

```
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.vt {
 float: left;
 margin-bottom: 5px;
 border-right: 1px solid black;
 border-bottom: 1px solid black;
 padding: 2px;
 }
 
.ht {  
 float: left;
 margin-left: 5px;
 margin-bottom: 5px;
 border-left: 1px solid black;
 border-bottom: 1px solid black;
 padding: 2px;
 }
 
.vb {  
 clear: left;
 float: left;
 border-right: 1px solid black;
 border-top: 1px solid black;
 padding: 2px;
 }
 
.hb {  
 float: left;
 margin-left: 5px;
 border-left: 1px solid black;
 border-top: 1px solid black;
 padding: 2px;
 }
 #clear
 {
 clear: left;
 visibility:hidden;
 }
 
</style>
</head>
<body>
<div class="vt"><img src="bilder/test_bild.png" alt="Vänster Top" width="149" height="89"></div>
<div class="ht"><img src="bilder/test_bild.png" alt="Höger Top" width="149" height="89"></div>
<hr id="clear">
<div class="vb"><img src="bilder/test_bild.png" alt="Vänster Botten" width="149" height="89"></div>
<div class="hb"><img src="bilder/test_bild.png" alt="Höger Botten" width="149" height="89"></div>
</body>
</html>
```

Tack mikkeX!

Mvh
Jan-Olov

Permalänk: https://www.webforum.nu/p/1161895

---

Tråden på webben: https://www.webforum.nu/amne/html-css/86262-css-fyra-bilder
