Question

我有一个我想要匹配的设计。我需要一个图像，一个.gif文本内容旁边。但我很明白无法把它带到那里，这让我很生气。

最终目标是一个photoshopped设计。不知道如何将其翻译成代码：

enter image description here

我的HTML在下面。在jsfiddle中，我使用了更多的CSS＆amp; 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

我认为你应该研究一下Bootstrap的网格系统，它会（据我所见）解决你的问题：）

我为你制作了一个样本小提琴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，然后将其余部分留空。

将图像放在文本/链接内容旁边

1 个答案: