Question

这是我想要做的：我希望css显示这样的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

如果您放置另一个包含 left 的div， mid 和 right 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; }

Answer 2

position:absolute;会从文档的常规流中删除元素，因此您无法float这些元素。

以下是使用float尝试实现的布局示例以及使用position:absolute;

的布局示例

Css对齐左，中，右，不工作

2 个答案: