0
ich auf einer Seite arbeite und ich versuche, ein Bild von einem iPhone zu machen direkt rechts von der Kopfzeile, Absatz- und Aufruf zum Handeln (searchbar, search) wie folgt:Wie platziere ich ein Bild rechts von einem Textkörper?
Aber das Bild wird immer weiter in das nächste Modul geschoben.
Was kann ich tun, um das Telefonbild an die richtige Stelle zu bringen?
#hero {
background-color: #62CE9C;
display: inline-block;
height: 600px;
margin: 0px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero img {
float: left;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
width: 290px;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
width: 330px;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 10px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetone img {
float: left;
}
#tweetonetext {
float: left;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 900px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
text-align: center;
}
#vocational p {
color: #62CE9C;
display: inline-block;
margin-left: 20px;
}<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="[email protected]"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
<img src="images/phone.png"/>
</div>
<div id="functions">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>@devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<h3>Jack Falahee</h3>
<h3>@RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<h3>mason ryan</h3>
<h3>@MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="[email protected]"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
ist dies die Art von Layout, das Sie erreichen wollen? https://jsfiddle.net/059vjrpo/1/ – wf4