css – 第二个DIV不会对齐,被推倒

前端之家收集整理的这篇文章主要介绍了css – 第二个DIV不会对齐,被推倒前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我到处搜索,尽我所能,但我不能让我的第二个DIV对齐.见下面的代码

image on tinypic.com

如您所见,我添加了一个白色边框,以便我们可以看到确切的大小.这里的问题是右侧的社交媒体按钮DIV.

这是HTML:

  1. <div id="content_header">
  2. <div id="schcontainer" class="schcontainer">
  3. <%= form_tag({:controller => 'list',:action => 'index'},:id => 'searchfrm') do %>
  4. <div id="searchBoxwrap">
  5. <%= text_field_tag(:query,value=@query,options={:size => "47",:placeholder => "Enter a product name..."}) %>
  6. <%= text_field_tag(:selectedpage,value=@page,options={:class => "hiddenelement"}) %>
  7. </div>
  8. <%= submit_tag("") %>
  9. <% end %>
  10. <div class="clear"></div>
  11. </div>
  12. <div id="mediabuttons">
  13. <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div>
  14. <div><a href="https://twitter.com/share" data-url="<%=renderFullUrl%>" data-count="horizontal" class="twitter-share-button" data-size="small">Tweet</a></div>
  15. <div class="g-plusone" data-size="medium"></div>
  16. <div><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-counter="right"></script></div>
  17. </div>
  18. </div>
  19. <div class="clear" id="fb-root"></div>

这是CSS

  1. #content_header{
  2. width:100%;
  3. background-color:#333333;
  4. border-bottom: 1px solid #999999;
  5. -webkit-Box-shadow: 0 0 3px 0 #000;
  6. -moz-Box-shadow: 0 0 3px 0 #000;
  7. Box-shadow: 0 0 3px 0 #000;
  8. padding: 10px 10px 10px 10px;
  9. height:35px;
  10. vertical-align: top;
  11. }
  12.  
  13. #schcontainer{
  14. width:48%;
  15. border: 1px solid #FFFFFF;
  16. }
  17.  
  18. #mediabuttons{
  19. width:39%;
  20. float:right;
  21. text-align:right;
  22. border: 1px solid #FFFFFF;
  23. }
  24.  
  25. #mediabuttons div{
  26. margin:0;
  27. padding:0;
  28. width:25%;
  29. float:left;
  30. }
  31.  
  32.  
  33. .clear {
  34. height: 0;
  35. font-size: 1px;
  36. margin: 0;
  37. padding: 0;
  38. line-height: 0;
  39. clear: both;
  40. }

任何帮助将不胜感激.

干杯!

更新的CSS:

  1. #content_header{
  2. float:left;
  3. overflow:hidden;
  4. width:100%;
  5. background-color:#333333;
  6. border-bottom: 1px solid #999999;
  7. -webkit-Box-shadow: 0 0 3px 0 #000;
  8. -moz-Box-shadow: 0 0 3px 0 #000;
  9. Box-shadow: 0 0 3px 0 #000;
  10. padding: 10px 10px 10px 10px;
  11. }

解决方法

我更喜欢使用display:inline-block而不是浮点数,现在似乎是其中之一.用两个主要div上的浮动替换浮点应该可以解决问题.你的彩色图像不适合我,但尝试这个jsfiddle,看看它是否产生你正在寻找的结果. http://jsfiddle.net/k96BU/

添加了一个vertical-align:top,这样它们也可以正确排列.

猜你在找的CSS相关文章