試圖讓圖片浮動文本的權利

Question

我一直在這一整個週末工作，出於某種原因，我只是無法正確排列這個div。我試圖讓圖像進入我擁有的文本的右側，它不會去，有人能幫我看看我做錯了什麼嗎？

編輯：澄清圖像下的一小部分文本應該是在圖像下，我希望圖像和一小部分圖像漂浮在巨大的文本塊的右側。

HTML5

<section id="content-wrapper"> <!-- Main content of the site --> 
    <div id="content"> 
     <article> 
      <header> 
       <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit!!</h1> 
      </header><br> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><br> 

      <p>Lorem ipsum dolor sit amet,</p> 
      <p>Lorem ipsum dolor sit amet,</p> 
      <p>Lorem ipsum dolor sit amet,</p><br> 

      <p>Lorem ipsum dolor sit amet,</p><br> 

      <header> 
       <h2><p>Lorem ipsum dolor sit amet,</p></h2> 
      </header><br> 

      <ul> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
       <li>Lorem </li> 
      </ul><br> 

      <header> 
       <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</h2> 
      </header><br> 

      <header> 
       <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2> 
      </header><br> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 

      <footer> 
       <p>Lorem  &#42; Lorem  &#42; Lorem </p> 
      </footer> 

      <div id="sales-wrapper"> 
       <div id="sale-item1"> 
         <img src="http://placehold.it/350x450"> 
        <p> 
         Lorem ipsum dolor sit amet<br> 
         Price: $888 
        </p> 
       <div id="sale-item2"> 
         <img src="http://placehold.it/350x450"> 
        <p> 
         ipsum dolor sit amet<br> 
         Price: $888 
        </p> 
       </div> 
       <div id="sale-item3"> 
         <img src="http://placehold.it/350x450"> 
        <p> 
         ipsum dolor sit amet<br> 
         Price: $888 
        </p> 
       </div> 
       </div> 
      </div> 
     </article> 
    </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%; 
    background-color: antiquewhite; 
} 

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

#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: 30%; 
    float: left; 
    background-color:black; 
} 

Answer 1

有兩個問題：

1. 該圖像是太大的頁面，讓文字坐在一邊。
2. 在你告訴一切左側浮動，因此圖像不會想坐在右邊

爲了更好的解決方案，你可以使用CSS來他們正確定位或使用的主要銷售包裝的div一個用於保存左側文本和右側圖像的html表格。然而，一個簡單的解決方案是減少圖像大小，並告訴文字向左浮動，而圖像浮動正確。

這個簡單的解決方案是在這裏表示：

http://jsfiddle.net/4KNH9/

#sales-wrapper { 
    width: 100%; 
    float: right; 
    color:white; 
} 

#floatright { 
    float:left; 
} 

如果您正在使用的圖像都是不同的大小，你可能要使用一個表或設置圖像的寬度和高度CSS，如果你需要任何幫助，讓我知道。