HTML Kästen nebeneinander?
Hallo,
kann mir jemand verraten wie ich in HTML/ CSS, die zwei blauen Kästen nebeneinander bekomme (Auf einer Höhe)
Vielen Dank im Vorraus!
3 Antworten
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
PC, Computer, HTML
HTML:
<div class="container">
<div>Icon</div>
<div>Text</div>
</div>
CSS:
.container { display: flex; }
Um die Breite festzulegen, kannst du je div noch das width-Property, bestenfalls mit prozentualen Werten, setzen.
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
kann mir jemand verraten wie ich in HTML/ CSS, die zwei blauen Kästen nebeneinander bekomme (Auf einer Höhe)
Da gibt es mehrere Möglichkeiten.
<!doctype html>
<title>boxen nebeneinander</title>
<style>
* {
box-sizing:border-box
}
.box {
float:left;
background:blue;
height:2em;
border:1px solid white
}
.box1 {
width:200px
}
.box2 {
width: calc(100% - 200px)
}
</style>
<div class="box box1"></div>
<div class="box box2"></div>
oder
<!doctype html>
<title>boxen nebeneinander</title>
<style>
.boxen {
display:flex
}
.box1 {
width:200px;
height:2em;
background:blue;
border:1px solid white
}
.box2 {
width: calc(100% - 200px);
height:2em;
background:blue;
border:1px solid white
}
</style>
<div class="boxen">
<div class="box1"></div>
<div class="box2"></div>
</div>
Alex
Pack sie in ein <div>, wenn das nicht reicht, über CSS "display: inline-block" hinzufügen, dann müsste es klappen.
Hey! Vielen Dank für deine Hilfe. Jedoch ändert sich nichts :( Habe ich ein Fehler im HTML / CSS Code?
<div class="titel1">
<img src="bilder/logo.jpg" alt=Logo Fahrradvermietung width="80px" height="80px" />
</div>
<div class="titel2">
<h1>Willkommen bei RadTour in Überlingen</h1>
</div>
------------------------------------------------------------
.titel1
{
width: 250px;
height: 80px;
background-color: #0066FF;
text-align: Center;
}
.titel2
{
width: 1500px;
height: 80px;
background-color: #0066FF;
text-align: Center;
display: flex;
float: right;
}