我到处搜索并尝试尽我所能,但我无法让我的第二个DIV对齐。请参见下面的代码:第二个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, [email protected], options={:size => "47", :placeholder => "Enter a product name..."}) %>
<%= text_field_tag(:selectedpage, [email protected], 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;
}
就是这样!非常感谢:-) – 2012-03-20 14:20:16
+1这工作得很好,很好的答案。 – Mikaveli 2013-04-03 13:34:33