Container rücken sich selber ein nach Texteingabe
chris1234
- css
0 ChrisB
Hallo,
ich habe ein kleines Problem (wahrscheinlich ist es CSS xD) und zwar: Wieso werden die Container anders eingerückt bzw. in der Höhenposition verändert sobald ich verschieden lange Texte in den Containern habe? Hier mein Beispiel:
<html>
<head>
<title>TestfürContainer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
text-align: center;
}
#container7{width: 250px; height: 40px; margin: 1em; display: inline-block; background-color: #630; margin-top: 100px;}
#container8{width: 250px; height: 40px; margin: 1em; display: inline-block; background-color: #630;margin-top: 100px;}
#container9{width: 250px; height: 40px; margin: 1em; display: inline-block; background-color: #630;margin-top: 100px;}
p {
display: block;
width: 450px;
margin: 1em auto;
text-align: center;
margin-top: 2px;
margin-bottom: 15px;
}
h1 {
margin-bottom: 5px;
}
h2 {
margin-top: 2px;
margin-bottom: 2px;
}
</style>
</head>
<body>
<h1 style="font-family:Arial; font-size:200%; color:black"></h1>
<h2 id="header" style="font-family:Arial; font-size:100%; color:black"></h2>
<div id="container7"></div>
<div id="container8">awbduiawdbuiabawdawda wdawdawdaawdawdawd</div>
<div id="container9">bwaudbauwidbaiwusiuwbduiwanofinweofniwenfownifownowdawdawdawdawd</div>
</body>
<html>
Wenn die Texte alle gleichlang sind , befinden sich alle Container auf einer Höhe. Ich hab außerdem schon versucht die Container per "Position" zu positionieren, aber da sich ja verständlicherweise noch andere Sachen auf der Seite befinden, ist das Ganze zu anstrengend. Die Möglichkeit "Display:inline-block" kommt da wie gerufen.
Danke im Voraus!
Hi,
Wieso werden die Container anders eingerückt bzw. in der Höhenposition verändert sobald ich verschieden lange Texte in den Containern habe?
Die Möglichkeit "Display:inline-block" kommt da wie gerufen.
Die ist aber auch „Schuld“.
Gebe mittels vertical-align
an, wie du diese inline-block Boxen ausgerichtet haben möchtest.
MfG ChrisB