我到处搜索,尽我所能,但我不能让我的第二个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:
解决方法
我更喜欢使用display:inline-block而不是浮点数,现在似乎是其中之一.用两个主要div上的浮动替换浮点应该可以解决问题.你的彩色图像不适合我,但尝试这个jsfiddle,看看它是否产生你正在寻找的结果.
http://jsfiddle.net/k96BU/
我添加了一个vertical-align:top,这样它们也可以正确排列.