2012-03-20 59 views
6

我到处搜索并尝试尽我所能,但我无法让我的第二个DIV对齐。请参见下面的代码:第二个DIV不会对齐,被推下来

image on tinypic.com

正如你所看到的,我加入了一个白色边框,使我们能够看到的确切大小。这里的问题在于右侧的社交媒体按钮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; 
} 

回答

10

我倾向于使用display:inline-block而不是浮动,如果可能的话,现在似乎是其中的一种。用这两个主要divs替换浮动应该做的伎俩。你的tinypic图像不适合我,但试试这个jsfiddle,看看它是否产生你正在寻找的结果。 http://jsfiddle.net/k96BU/

我增加了一个vertical-align:top,这样他们就可以正常排列了。

+0

就是这样!非常感谢:-) – 2012-03-20 14:20:16

+0

+1这工作得很好,很好的答案。 – Mikaveli 2013-04-03 13:34:33

0

添加float: left#schcontainer应该解决的问题。然而,您可能必须在之后拥有overflow: hidden或某种类型的clearfix。

+0

[链接](http://tinypic.com/r/xlgzlg/5)我添加了float:left,删除了高度,并且还添加了overflow:hidden。 – 2012-03-20 13:43:16

0

#schcontainer想要float:left肯定吗?

+0

[链接](http://tinypic.com/r/xlgzlg/5)我添加了float:left,删除了高度,并且还添加了overflow:hidden。 – 2012-03-20 13:42:27