Javascript 编辑布局以在元素之间使用垂直规则。

我有以下简化的测试用例：

在我的设计形象中，这就是我想要的：

在页脚中，您可以看到我在电子邮件交易和目录部分之间添加了一条水平规则。然而，我不知道如何通过代码来实现这一点

我的HTML在下面。在JSFIDLE中，我使用了大量的外部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 href=" //rsatestamle.dminsite.com/catalogs.aspx" title="Catalogs" style="text-decoration:underline;"><font color="#F25C27">View our online catalog</font></a>, or <br><br><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;">
                    <font color="#F25C27">request a free catalog now!</font></a><br>
            </div>
        </div>
    </div>
</section>

电子邮件交易
注册以接收销售和；独家新闻

我们不会出售或租用您的电子邮件地址


目录
，或

有很多方法可以做到这一点，但一个超级简单的解决方案就是在“catalogs”部分添加一个包装器div，然后只在左侧添加一个边框，并添加足够的填充，以便将其放在需要的位置

另外，在两个元素之间粘贴一个1px宽的块元素，并提供一个易于调整的边框。这两种方法都很好，因为它们可以随元素移动和缩放，而无需添加一些可怕的绝对定位逻辑。

尝试以下方法：

 ---------- CSS -----------
// remove or update container width. Its now width: 730px should be .

.container {
    /* width:724px; */
}

#newslettersignup .newsletter {
    min-width: 414px;
    border-right: 1px solid #DADADA;
}


-------------HTML --------------
//Remove class catrr from div
<div class="pull-right catrr" id="Catalog">
.......           
</div>

------------CSS-----------
//删除或更新容器宽度。它现在的宽度：730px应该是。
.集装箱{
/*宽度：724px*/
}
#通讯注册。通讯{
最小宽度：414px；
右边框：1px实心#达达；
}
-------------HTML--------------
//从div中删除catrr类
.......