html - 图像右对齐

Question

我编写这段 HTML 代码已经有一段时间了，今天我真的需要把它总结一下。正文下方的图像需要位于正文的右侧，我在该图像下方的描述语句需要留在那里。请帮忙。

HTML5

<section id="content-wrapper"> <!-- Main content of the site -->
    <div id="content">
        <article>
            <header>
                <h1>NOW OPEN AT OUR LOCATION!!</h1>
            </header><br>

            <p>After a year of rebuilding we are back at our 
            original location. Come see us at</p><br>

            <p>Store name &#38; Jewelry</p>
            <p>store address</p>
            <p>cite/state</p><br>

            <p>Phone</p><br>

            <header>
                <h2>We have <span id="money">MONEY</span> TO <span id="loan">LOAN</span> for new pawns.</h2>
            </header><br>

            <ul>
                <li>Jewelry</li>
                <li>Flat Screen Tvs</li>
                <li>Computers</li>
                <li>Tools</li>
                <li>Generators</li>
                <li>Pressure Washers</li>
                <li>Motorcycles</li>
                <li>Lawn Mowers</li>
            </ul><br>

            <header>
                <h2>Instant <span id="money">Cash</span> for you <span id="gold">GOLD</span>!</h2>
            </header><br>

            <header>
                <h2>Broken jewelry welcome.</h2>
            </header><br>

            <p>Now is the time to get top dollar for your broken 
            or scrap jewelry.</p>
            <p>Don’t trust your gold to the mail or some internet scam.</p> 
            <p>We pay Cash for your Gold,  IMMEDIATELY and IN PERSON.</p><br>

            <footer>
                <p>BUY      &#42;  SELL     &#42;  TRADE</p>
            </footer>
        </article>

            <div id="sales-wrapper">
                <div id="sale-item1">
                        <img src="http://placehold.it/200x250">
                    <p>
                        Item Name<br>
                        Price: $888
                    </p>
                <div id="sale-item2">
                        <img src="http://placehold.it/200x250">
                    <p>
                        Item Name<br>
                        Price: $888
                    </p>
                </div>
                <div id="sale-item3">
                        <img src="http://placehold.it/200x250">
                    <p>
                        Item Name<br>
                        Price: $888
                    </p>
                </div>
                </div>
            </div>  
    </div>
</section>

CSS3

#content-wrapper {
    width: 70%;
    margin: 1% auto;
    line-height: 20px;
    background-color: #F0F8FF;
    overflow: hidden;
}

#content {
    width: 100%;
    float: left;
    margin: 2%;
}

#content article {
    padding: 3% 5%;
    background-color: gray;
    width: 40%;
    float: left;
}

#content article  p {
    font-size: 16px;
    margin-left: 2%;
}
#content article ul {
    list-style: none;
    margin-left: 5%;
}

#content article ul li {
    font-size: 16px;
}

#content article header h2 {
    color: #354175;
}

/* Span statments */

#money /* works for the words "MONEY" and "CASH" */ {
    font-size: 20px;
    color: #0E8B0B; 
}

#loan {
    font-size: 20px;
    color: #C71F0E; 
}

#gold {
    font-size: 20px;
    color: #DAA545;
}

#content article footer {
    width: 100%;
    float: left;
    text-align: center;
}

#content article footer p {
    font-weight: bold;
    font-size: 23px;
    color: #354175;
}

#sales-wrapper {
    width: auto;
    float: left;
    margin: 40%;
    background-color: gray;
}

Answer 1

我会做不同的，但我保持你的代码完整，只是改变了定位。检查一下:

HTML:

    <section id="content-wrapper"> <!-- Main content of the site -->
      <div id="content">
        <article>
          <header>
            <h1>NOW OPEN AT OUR LOCATION!!</h1>
          </header><br>

          <p>After a year of rebuilding we are back at our original location. Come see us at</p><br>

          <p>Store name &#38; Jewelry</p>
          <p>store address</p>
          <p>cite/state</p><br>

          <p>Phone</p><br>

          <header>
            <h2>We have <span id="money">MONEY</span> TO <span id="loan">LOAN</span> for new pawns.</h2>
          </header><br>

          <ul>
            <li>Jewelry</li>
            <li>Flat Screen Tvs</li>
            <li>Computers</li>
            <li>Tools</li>
            <li>Generators</li>
            <li>Pressure Washers</li>
            <li>Motorcycles</li>
            <li>Lawn Mowers</li>
          </ul><br>

          <header>
            <h2>Instant <span id="money">Cash</span> for you <span id="gold">GOLD</span>!</h2>
          </header><br>

          <header>
            <h2>Broken jewelry welcome.</h2>
          </header><br>

          <p>Now is the time to get top dollar for your broken or scrap jewelry.</p>
          <p>Don’t trust your gold to the mail or some internet scam.</p> 
          <p>We pay Cash for your Gold,  IMMEDIATELY and IN PERSON.</p><br>



          <footer>
            <p>BUY      &#42;  SELL     &#42;  TRADE</p>
          </footer>

        </article>
      </div>   

      <div id="sales-wrapper">
        <div id="sale-item1">
          <img src="http://placehold.it/200x250">
          <p>
            Item Name<br>
            Price: $888
          </p>
        <div id="sale-item2">
          <img src="http://placehold.it/200x250">
          <p>
            Item Name<br>
            Price: $888
          </p>
        </div>
        <div id="sale-item3">
          <img src="http://placehold.it/200x250">
          <p>
            Item Name<br>
            Price: $888
          </p>
        </div>
      </div>

    </section>

CSS:

    #content-wrapper {
        width: 100%;
        margin: 1% auto;
        line-height: 20px;
        background-color: #F0F8FF;
        overflow: hidden;
        display: relative;
    }

    #content {
        width: 50%;
        float: left;
        margin: 2%;
    }

    #content article {
        padding: 3% 5%;
        background-color: gray;
        float: left;
    }

    #content article  p {
        font-size: 16px;
        margin-left: 2%;
    }
    #content article ul {
        list-style: none;
        margin-left: 5%;
    }

    #content article ul li {
        font-size: 16px;
    }

    #content article header h2 {
        color: #354175;
    }

    /* Span statments */

    #money /* works for the words "MONEY" and "CASH" */ {
        font-size: 20px;
        color: #0E8B0B; 
    }

    #loan {
        font-size: 20px;
        color: #C71F0E; 
    }

    #gold {
        font-size: 20px;
        color: #DAA545;
    }

    #content article footer {
        width: 100%;
        float: left;
        text-align: center;
    }

    #content article footer p {
        font-weight: bold;
        font-size: 23px;
        color: #354175;
    }

    #sales-wrapper {
        float: right;
        display: relative;
        margin: 20px;
        top: 20px;
        left: 10px;
        background-color: gray;
    }