Ich möchte das die Bilder abwechseln immer links und rechts sind. Der Text soll dabei immer in der Mitte bleiben. An Smartphones sollen die Bilder dann allerdings immer zwischen den Texten seinen also Überschrift...Bild....Text....Bild....Text....Bild....Text. Folgenden Code habe ich bereits aber wie ihr seht funktioniert das nicht: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.bildlinks{
float: left;
padding: 3px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.bildrechts{
float: right;
padding: 3px;
padding-top: 20px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.textbild{
padding-top: 45px;
}
</style>
<h2>Starseite</h2>
<p class="textbild"><img class="bildlinks" src="images/spiritplace6.png" alt="SpiritPlace Logo" />Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque, quia totam explicabo sint cupiditate saepe quas aliquid autem dolor quibusdam quam fugit ex enim voluptatem ut quis aspernatur magni recusandae?</p>
<p class="textbild"><img class="bildrechts" src="images/spiritplace6.png" alt="SpiritPlace Logo" />Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, soluta!</p>
<p class="textbild"><img class="bildlinks" src="images/spiritplace6.png" alt="SpiritPlace Logo" padding-top="20px" />Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, amet. At placeat, ad consectetur doloribus quis dolor, esse ut tempora cum eum harum vero accusantium excepturi temporibus dolore nihil blanditiis?</p>
</body>
</html>
Gerne CSS einzeln!
