创建3个浮动div

Question

我正在为我的网站设计页脚。 我试图在页脚div中获取mailchimp注册表单，但未能这样做。 mailchimp只是从页脚中浮出来。请查看网站和帮助。

HTML：

 <!--Footer Starts Here-->
<div class="footer">
    <div class="fblikebox">
    <div class="fb-like-box" style="background:#fff;"data-href="http://www.facebook.com/dreamshream" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
    </div>
    <!--Newsletter Signup Form Starts Here-->
    <div id="mc_embed_signup">
    <form action="http://dreamshream.us5.list-manage2.com/subscribe/post?u=f9d3ecf4654824653602ef8c2&amp;id=fcb9497955" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <label for="mce-EMAIL">Subscribe to our mailing list</label>
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </form>
    </div>
    <!--Newsletter Signup Form Ends Here-->
</div>
<!--Footer Ends Here-->

相关CSS：

.footer{background:#313A72;position:relative;width:100%;clear:both;}
#mc_embed_signup{width:33%;float:right;font:14px Helvetica,Arial,sans-serif;}
#mc_embed_signup form {text-align:left;}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     
#mc_embed_signup .clear {clear:none; display:inline;}

#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}
#mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
.fblikebox{width:33%;margin-left:auto;margin-right:auto;}

这是输出：

了解注册表单是如何脱离div的。如果有人能帮忙，我将不胜感激。

JSFIDDLE

Answer 1

您需要做的是在课堂上创建一个div，例如footer_col内的<{> CSS #footer .footer_col { width: 32%; float: left; }。现在你只是问自己为什么定义width: 32%，这只是因为你可以定义margin-left: 1%来区分你的元素。

重复你的div 3次并在里面分发你的代码。 第一个 div maked用于最左边的列，第二个是居中和最后一个，所以，最后一个是最后一个。