Question

我到处搜索并尽我所能，但我不能让我的第二个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;
}

Answer 1

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

我添加了一个vertical-align:top，因此它们也可以正常排列。

Answer 2

向float: left添加#schcontainer可以解决问题。尽管如此，您可能必须overflow: hidden或某种明确修复{.1}}。

Answer 3

#schcontainer肯定要float:left吗？

第二个DIV将不会对齐，被推倒

3 个答案: