0
한 페이지에 일하고 난 아이폰의 이미지 헤더, 단락의 오른쪽에 직접적으로 행동 (검색 창, searchbutton)에 전화를 만들과 같이하기 위해 노력하고있어 :이미지를 텍스트 본문 오른쪽에 배치하려면 어떻게합니까?
그러나 이미지는 계속해서 다음 모듈로 푸시 다운됩니다.
전화 이미지를 올바른 위치에 배치하려면 어떻게해야합니까?
#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>
이것은 달성하려는 레이아웃의 유형입니까? https://jsfiddle.net/059vjrpo/1/ – wf4