Problem mit CSS boxen

cpt_muh · 31. Oktober 2010

Guten Tag

Ich möchte 9 kleine Boxen im quadrat anordnen also 3 Reihen mit jeweils 3 Boxen.

Allerdings klappt das alles nicht so wie ich mir das vorstelle. Die boxen kommen nie so wie ich das will.

Code:

 Der Html Code für die erste Reihe
<div id="wrapper">
   <div id="row1">
    <div class="boxes" id="box1">
    Ich bin Box Nummer #1
    </div>
    <div class="boxes" id="box2">
    Ich bin Box Nummer #2
    </div>
    <div class="boxes" id="box3">
    Ich bin Box Nummer #3
	</div>
  </div>
</div>

Jetzt der CSS Code die divs

Code:

#wrapper{
	background-color: white;
	width: 720px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	padding: 10px 10px 10px 10px;
	border: solid 4px black;
}

.boxes{
	width: 100px;
	height: 100px;
	border: solid 1px black;
	display: inline;
	
	}

#box1{
	background-color: #133AAC;
	margin: 10px;
	
	
}

#box2{
	background-color: #2B4181;
	margin: 10px;
		
}

#box3{
	background-color: #062170;
	margin: 10px;
}

Wenn ich display:inline angebe. Ändern die Boxen ihre größe und spielen verrückt. Wenn ich sie per position rumschicke dann fliegen sie oft aus dem Wrapper raus :S

weiß jemand eine gute lösung?
Reihe 2 und Reihe 3 sind genauso aufgebaut darum habe ich erstmal nur eine Reihe angegeben.

Garbanas · 31. Oktober 2010

Du weisst schon, wofür "display: inline;" steht? Inline-Elemente haben nur die Grösse, welche sie selbst aufspannen. "display: block;" macht einen Block, bei dem width und height greifen.
Was du suchst ist "float: left"

Code:

.boxes { display: inline; float: left; }
/*
display: inline; vor dem float behebt einen Bug in IE 6. Normal brauchst du das ned zu schreiben.
*/

Nachtrag:
Um den Umfluss (float) zu unterbrechen, gibt es die CSS-Eigenschaft: "clear" mit Werten "left, right, both"

fel1x. · 31. Oktober 2010

und nach einer Zeile das clear="left" bzw "both" nicht vergessen

cpt_muh · 31. Oktober 2010

Ich scheine trotz euer Hilfe das nicht hinzubekommen das die blöden Dinger nicht Über sondern untereinander stehen. :S So ein mist

Garbanas · 31. Oktober 2010

Funktioniert doch?

HTML:

<html>
<head>
<style type="text/css">
#wrapper{
	background-color: white;
	width: 720px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	padding: 10px 10px 10px 10px;
	border: solid 4px black;
}

.row {
	clear: both;
	overflow: hidden;
}

.boxes {
    display: inline;
	width: 100px;
	height: 100px;
	border: solid 1px black;
	float: left;
	overflow: hidden;
}

#box1 {
	background-color: #133AAC;
	margin: 10px;
}

#box2 {
	background-color: #2B4181;
	margin: 10px;
}

#box3 {
	background-color: #062170;
	margin: 10px;
}

#box4, #box5, #box6, #box7, #box8, #box9 {
	margin: 10px;
}

</style>
</head>
<body>

<div id="wrapper">
  <div class="row" id="row1">
    <div class="boxes" id="box1">Ich bin Box Nummer #1</div>
    <div class="boxes" id="box2">Ich bin Box Nummer #2</div>
    <div class="boxes" id="box3">Ich bin Box Nummer #3</div>
  </div>
  <div class="row" id="row2">
    <div class="boxes" id="box4">Ich bin Box Nummer #4</div>
    <div class="boxes" id="box5">Ich bin Box Nummer #5</div>
    <div class="boxes" id="box6">Ich bin Box Nummer #6</div>
  </div>
  <div class="row" id="row3">
    <div class="boxes" id="box7">Ich bin Box Nummer #7</div>
    <div class="boxes" id="box8">Ich bin Box Nummer #8</div>
    <div class="boxes" id="box9">Ich bin Box Nummer #9</div>
  </div>
</div>

</body>
</html>

Suche

Problem mit CSS boxen

cpt_muh

Ensign

Garbanas

Cadet 4th Year

fel1x.

Lt. Commander

cpt_muh

Ensign

Garbanas

Cadet 4th Year

Ähnliche Themen