小编tar*_*riq的帖子

我试图在div中垂直对齐两个不同高度的元素:

<div class="footer-icons">
    <div id="footer-twitter">
         <img src="images/twitter.png" width="40" alt="">    
    </div>
    <div id="footer-fb">
         <div class="fb-like" data-href="http://facebook.com/user" data-send="false" data-layout="button_count" data-width="160" data-show-faces="false" data-font="arial"></div>
    </div>
</div>

twitter div的高度为40px,fb div的高度为20px.目前发生的是fb div垂直居中于twitter图像的下边缘.这是CSS:

.footer-icons {
    padding-top:40px;
    width:300px;
    margin:auto;
    text-align:center;
    vertical-align:middle;
}

#footer-twitter {
    display:inline-block;
}

#footer-fb {
    display:inline-block;
}

我究竟做错了什么？

代码Twitter让你粘贴html看起来像这样:

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

它们允许你设置一个高度,我将其设置为600.当放置在我的网站上时,我得到了这个(查看源代码时):

<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe>

220宽度正在杀死我.我希望宽度是容器的整个宽度,这是100%(对于移动站点).目前,220宽度超过页面的一半,并显示一个丑陋的滚动条.

那么,为什么将宽度设置为220,我怎样才能将它扩展到它的父宽度？