在文字/鏈接內容旁邊放置圖像

Question

我有一個我試圖匹配的設計。我需要在文本內容旁邊顯示一個.gif圖像。但我只是明白無法到達那裏，而且這讓我發瘋。

簡化的測試案例在這裏： http://jsfiddle.net/QL49W/2/

最終目標是Photoshop處理設計。不知道如何把它雖然轉換成代碼：

我的HTML如下。在jsfiddle中，我使用了更多的CSS & JS。

<section id="newslettersignup"> 
    <div class="container White_BG"> 
     <div class="pull-left newsletter"> 
      <h2>E-mail Deals</h2> 
      Sign up to receive Sales &amp; exclusive news!<br> 
      We will not sell or rent your email address. <a href=" //rsatestamle.dminsite.com/privacy-policy/a/3/" style="text-decoration:underline;color:#F25C27;">Privacy Policy</a>.<br><br> 
      <form class="form-horizontal" method="post" action="http://www.gliq.com/cgi-bin/subunsub"> 
       <div class="input-prepend"> 
        <input type="hidden" name="acctname" value="amleo"> 
        <input type="hidden" name="action" value="subscribe"> 
        <input type="hidden" name="url" value=" //rsatestamle.dminsite.com/subscribe-successful/a/47/"> 
        <input type="text" placeholder="Your email address" id="inputIcon" class="input-xlarge" name="email"> 
        <input value="SUBSCRIBE" class="btn btn-orange" type="submit"> 
       </div> 
      </form> 
     </div> 
     <div id="Catalog" class="pull-right catrr"> 
      <div class="catalog"> 
        <h2>Catalogs</h2> 
        <a class="various" data-fancybox-type="iframe" href="catalogrequestpopup.aspx?catalog_id=0001&amp;name=2014 Catalog Request" title="Request a Catalog" style="text-decoration:underline;"><span style="color:#F25C27;">Request a Free Catalog</span></a> or<br> 
        <a href=" //rsatestamle.dminsite.com/catalogs.aspx" title="Catalogs" style="text-decoration:underline;"> 
        <span style="color:#F25C27;">View Online Catalog</span></a> 

        <div class="CatalogGif"> 
         <img src="http://cdnll.amleo.com/images/art/MG14_pro_animatedcover.gif" align="right"> 
        </div> 
      </div> 
     </div> 
    </div> 
</section> 

Answer 1

我想你應該考慮引導的網格系統，將（據我可以看到），將解決你的問題:)

我做了一個樣本搗鼓你http://jsfiddle.net/Fizk/QL49W/3/

<div class="container"> 
    <div class="row"> 
     <div class="span3">Hello</div> 
     <div class="span3">world</div> 
     <div class="span3">This</div> 
     <div class="span3">Rocks</div> 
    </div> 
</div> 

用這個你有12列的網格，你可以按照你想要的3-3-6,4-4-4或1-2的方式分解，然後讓其餘的留空。