Question

我在一个页面上工作，我试图将iphone的图像直接放在标题，段落和号召性用语（搜索栏，搜索按钮）的右侧，如下所示：

但是图像不断被推入下一个模块。

如何将手机图像放在正确的位置？

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

试试这个。

#hero  {
float: left;
}

img {
display: block;
float: right;
}

Answer 2

如何使用两列布局？

如何将图像放置在文本正文的右侧？

2 个答案: