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>

具体而言，margin-top上的默认h3。

您可以删除margin-top，如果这是您想要的内容：

h3 {
    margin-top: 0
}

或者，您可以在overflow: hidden上设置.center以阻止collapsing margins，这是“对齐问题”的来源。