如何將圖像放置在文本的右側？
[英]How Do I Place An Image To The Right of a Body of Text?
問題描述
我正在處理一個頁面，並且正在嘗試使iPhone的圖像直接位於標題，段落和號召性用語（搜索欄，搜索按鈕）的右側，如下所示：
但是圖像一直被壓入下一個模塊。
我該怎么做才能將手機圖像放置在正確的位置？
#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="yourname@email.com"/> <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="yourname@email.com"/> <input id="searchbutton" type="submit" value="Get Early Access" /> </form> </div> </body> </html>
2 個解決方案
解決方案1
1 已采納 2016-11-04 16:04:52
嘗試這個。
#hero {
float: left;
}
img {
display: block;
float: right;
}
解決方案2
1 2016-11-04 16:05:24
如何使用兩列布局？
如何在DIV中居中放置圖像，並在右側放置文本？ 溢出問題
[英]How do I place an image centered in a DIV and text to the right? Overflow problems
如何在不移動文本的情況下將圖像放在頁面右側
[英]How do I place an image on the right side of the page without moving the text
如何在每張圖片的右側並排放置3張圖片？ （混合泳）
[英]How do I place 3 images side by side with text to the right of each image? (Medley)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.