html - Css 左对齐，居中和右对齐，不起作用

Question

这是我正在尝试做的:我希望 css 像这样显示 div:

左(此处显示 Logo ) 中(此处同时显示左、中、右 div) 右(此处显示返回)

我有以下代码:

<div id="top" class="top">                
                <asp:Panel ID="Srch" runat="server" EnableViewState="False" Wrap="False">
                    <div id="logo">
                        <asp:ImageButton ID="logo" runat="server" ImageUrl="/images/logo.gif" />
                    </div>
                    <div id="left"></div>
                    <div id="mid">
                        <asp:textbox id="txtSearch" runat="server"></asp:textbox>
            <asp:button id="find" runat="server" Text="find"/>
                    </div>
                    <div id="right"></div>                    
                    <div id="return">
                        <asp:HyperLink ID="i" runat="server" Text="return"></asp:HyperLink>
                    </div>
                </asp:Panel>                                
            </div>

这是我目前拥有的 CSS:

#Srch
{
    position:absolute; 
    top:10px;   
    height: 35px;
    float:left;
    margin-left:19px;
    width: 100%;
    border:thick solid black; 
}
#left
{
    position:absolute;
    background:  url(/images/searchBG_left_10x35.png) repeat-x;
    top: 15px;
    width: 10px;
    height: 35px;
    left:50%;    
}
#mid
{
    position:absolute;
    background: url(/images/searchBG_mid_1x35.png) repeat-x;
    top: 15px;
    height: 35px;
    float:left;
}
#right
{
    position:absolute;
    background: url(/images/searchBG_right_10x35.png) repeat-x;
    top: 15px;
    width:9px;
    height:35px;
    float:left;
}
#return
{
    position:absolute;
    float: right;
    top: 15px;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial;
    text-decoration: underline;
    color: Blue;
}
#logo
{  
    position:absolute;
    float: left;   
    left: 0px;
    bottom: 0px;
}
#txtS
{
    width: 285px;
    height: 18px;
    position: relative;
    top: 8px;
    float: left;
    display: inline;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial;
    border: 0px;
    color: #000000;
    margin-right:3px;
}
#find
{
    position: relative;
    top: 8px;
    float: left;
    display: inline;
    width: 50px;
    height: 18px;
    cursor: pointer;
}

Answer 1

如果您放置另一个包含左、中 和右 div 的 div，您可以尝试这样的操作:HTML

<div ID="Srch">
    <div id="logo"> </div>
    <div id="medio">
        <div id="left"> </div>
        <div id="mid"> </div>
        <div id="right"> </div>
    </div>
    <div id="return"> </div>
</div>

CSS

#Srch{
    padding-left: 20em;
    padding-right: 22em;
}

#logo{
    float: left;
    width: 20em;
    margin-left: -20em;
}

#medio{
    float: left;
}

#return{
    float: left;
    width: 22em;
    margin-right: -22em;
}