css與3列布局的對齊問題

Question

我的網站如下所示： 我已將中心信息位着色爲紅色，所以您可以看到。這頁太遠了！我無法弄清楚爲什麼。

這裏的CSS（實際上SCSS，但你的想法），該節：

#searchresult { 
     .left { 
      background-color:yellow; 
      float:left; 
      margin-right:0.5em; 
     } 
     .center { 
      background-color:red; 

      #activity { 
       float:right; 
      } 
     } 
     .right { 
      background-color:green; 
      float:right; 
      width:145px; 
      margin-left: 1em; 

      .info, .email { 
       @include minimal-btn(); 
       a { 
        padding: 3px 0 0 28px; 
       } 
      } 
     } 
    } 

（如果你還沒有看到它之前，SCSS是編譯成CSS一件很酷的事情它作爲你認爲它會工作得）

這裏的HTML：

  <ItemTemplate> 
       <div id="searchresult" class="box group"> 
        <div class="left"> 
         <img id="imgLogo" runat="server" alt="Logo" src=""/> 
        </div> 
        <div class="right"> 
         <asp:Panel ID="pnlEmail" runat="server"> 
          <div class="minimal email"><asp:HyperLink ID="lnkEmail" runat="server">Email this business</asp:HyperLink></div> 
         </asp:Panel> 
         <asp:Panel ID="pnlMicrosite" runat="server"> 
          <div class="minimal info"><asp:HyperLink ID="lnkMicrosite" runat="server">Full company info</asp:HyperLink></div> 
         </asp:Panel> 
         <asp:Panel ID="pnlRecommends" runat="server" CssClass="recommends"> 
          <span>Recommends: <strong><asp:Literal ID="litRecommends" runat="server"></asp:Literal></strong></span> 
         </asp:Panel> 
        </div> 
        <div class="center"> 
         <span id="activity">Activity: <asp:Literal ID="litCompanyActivity" runat="server"></asp:Literal></span> 
         <h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3> 
         <em><asp:Literal ID="litCompanyLocation" runat="server"></asp:Literal></em> 
        </div> 
       </div> 
      </ItemTemplate> 

我很新的網頁設計。 Css對我來說不是很直觀，我無法弄清楚這裏發生了什麼。 In the guide I was following這個問題似乎沒有出現。

Answer 1

這是造成問題的原因：

<h3><asp:Literal ID="litCompanyName" runat="server"></asp:Literal></h3> 

具體而言，在h3默認margin-top。

可以刪除margin-top，如果這就是你想要的東西：

h3 { 
    margin-top: 0 
} 

或者，您可以設置.centeroverflow: hidden防止collapsing margins，這是你的「對齊問題」的根源。