我到处搜索,尽我所能,但我不能让我的第二个DIV对齐.见下面的代码:
如您所见,我添加了一个白色边框,以便我们可以看到确切的大小.这里的问题是右侧的社交媒体按钮DIV.
这是HTML:
<div id="content_header"> <div id="schcontainer" class="schcontainer"> <%= form_tag({:controller => 'list',:action => 'index'},:id => 'searchfrm') do %> <div id="searchBoxwrap"> <%= text_field_tag(:query,value=@query,options={:size => "47",:placeholder => "Enter a product name..."}) %> <%= text_field_tag(:selectedpage,value=@page,options={:class => "hiddenelement"}) %> </div> <%= submit_tag("") %> <% end %> <div class="clear"></div> </div> <div id="mediabuttons"> <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div> <div><a href="https://twitter.com/share" data-url="<%=renderFullUrl%>" data-count="horizontal" class="twitter-share-button" data-size="small">Tweet</a></div> <div class="g-plusone" data-size="medium"></div> <div><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-counter="right"></script></div> </div> </div> <div class="clear" id="fb-root"></div>
这是CSS
#content_header{ width:100%; background-color:#333333; border-bottom: 1px solid #999999; -webkit-Box-shadow: 0 0 3px 0 #000; -moz-Box-shadow: 0 0 3px 0 #000; Box-shadow: 0 0 3px 0 #000; padding: 10px 10px 10px 10px; height:35px; vertical-align: top; } #schcontainer{ width:48%; border: 1px solid #FFFFFF; } #mediabuttons{ width:39%; float:right; text-align:right; border: 1px solid #FFFFFF; } #mediabuttons div{ margin:0; padding:0; width:25%; float:left; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; }
任何帮助将不胜感激.
干杯!
更新的CSS:
#content_header{ float:left; overflow:hidden; width:100%; background-color:#333333; border-bottom: 1px solid #999999; -webkit-Box-shadow: 0 0 3px 0 #000; -moz-Box-shadow: 0 0 3px 0 #000; Box-shadow: 0 0 3px 0 #000; padding: 10px 10px 10px 10px; }
解决方法
我更喜欢使用display:inline-block而不是浮点数,现在似乎是其中之一.用两个主要div上的浮动替换浮点应该可以解决问题.你的彩色图像不适合我,但尝试这个jsfiddle,看看它是否产生你正在寻找的结果.
http://jsfiddle.net/k96BU/
我添加了一个vertical-align:top,这样它们也可以正确排列.