Hallo Leute,
Ich bekomme es nicht hin den Text an die markierten Stellen zu verschieben ohne neue "graue Boxen" zu erstellen.
Code
<!DOCTYPE HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Poiret+One|Varela+Round' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
main , header , footer {
width:100%;
margin:0px auto;
padding:10px;
font-family: 'Poiret One';
line-height:20px;
letter-spacing:1px;
box-sizing:border-box;
}
main {
background:white;
display:flex;
}
.links,.rechts{
background:white;
color: Black;
display:flex;
flex:1;
padding: 1em;
font-weight: bold;
text-align: center;
}
main{
display:flex;
}
#mywrapper p {
padding: 10px;
}
footer{
padding: 10px;
background: transparent;
text-align: right;
color: black;}
#mywrapper h1 {
background:orange;
padding: 15px;
font-family: 'Poiret One';
text-align:center;
}
.ll,.rr{
flex:1;
padding:10px;
background: lightgrey;
}
img{
flex:1;
width: 100%;
border: 0px solid lightgrey;
}
.ll p,.ll h2{
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="mywrapper">
<header>
<h1>Frisch eingetroffen!</h1>
</header>
<main>
<div class="links">
<div class="ll">
<h2>Artikel 1</h2><p>Texte die man rein schreiben kannn</p></div>
<div class="rr">
<a href="#"><img alt="" src="/image/Hauptbild-mit-Rand.jpg" width="20%"></a>
</div>
</div>
<div class="rechts">
<div class="ll">
<h2>Artikel 2<h2><p> text text text text text text text text text text</p>
<p>Hallo, ich bin ein Text der Grösse 5</p>
</div>
<div class="rr">
<a href="#"><img alt="" src="/image/Hauptbild-mit-Rand.jpg" width="20%"></a>
</div>
</div>
</main>
<footer>
Fotter
</footer>
</body>
</html>