漂浮的错误地方:左边的div

时间:2010-09-01 09:13:09

标签: asp.net html css

        <div id="nav-main" align="center" style="width: 95%; height: 35px;">
            <div style="float:left; height: 29px; width: 260px;">
                            <a href="javascript:void(0);" onclick="select();" 
                                style="font-size: small; background-color: #FFFFFF">
                                &#1048;&#1079;&#1084;&#1077;&#1085;&#1080;&#1090;&#1100; &#1082;&#1086;&#1076; &#1080; &#1087;&#1088;&#1080;&#1084;&#1077;&#1095;&#1072;&#1085;&#1080;&#1077;</a>
            </div>
            <div style="float:right; width: 639px;" align="center">
            <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" Width="521px" MaximumDynamicDisplayLevels="0"
                StaticSelectedStyle-CssClass="StaticSelectedStyle" Height="32px" StaticSubMenuIndent="18px"
                OnMenuItemClick="Menu2_MenuItemClick">
                <StaticSelectedStyle CssClass="StaticSelectedStyle"></StaticSelectedStyle>
                <Items>
                    <asp:MenuItem Text="&#1063;&#1072;&#1089;&#1086;&#1074;&#1099;&#1077;" Value="1" />
                    <asp:MenuItem Text="&#1057;&#1091;&#1090;&#1086;&#1095;&#1085;&#1099;&#1077;" Value="2"
                        Selected="True" />
                </Items>
            </asp:Menu>
            </div>
        </div>

看不到左边的div。 和萤火虫在正确的div下显示:(

如何自我左侧div并确定我做错了什么?

2 个答案:

答案 0 :(得分:1)

不确定我是否完全得到了你想要做的事情,但是至于让2个div相互浮动,我认为这就是你所要求的,请尝试以下方法。我将容器从95%宽度更改为固定宽度,以允许您为div定义的固定大小。我也将第二个div更改为float:left。即使您希望一个div浮动到左侧的右侧,也不意味着您需要使用float:right。如果它们都使用float:left进行样式设置并且其定义的宽度适合其包含元素,则第二个将浮动到第一个的右侧。希望有所帮助。

<div id="nav-main" align="center" style="min-width: 900px; width:95%; height: 35px;">
        <div style="float:left; height: 29px; width: 260px;">
                        <a href="javascript:void(0);" onclick="select();" 
                            style="font-size: small; background-color: #FFFFFF">
                            &#1048;&#1079;&#1084;&#1077;&#1085;&#1080;&#1090;&#1100; &#1082;&#1086;&#1076; &#1080; &#1087;&#1088;&#1080;&#1084;&#1077;&#1095;&#1072;&#1085;&#1080;&#1077;</a>
        </div>
        <div style="float:left; width: 639px;" align="center">
        <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" Width="521px" MaximumDynamicDisplayLevels="0"
            StaticSelectedStyle-CssClass="StaticSelectedStyle" Height="32px" StaticSubMenuIndent="18px"
            OnMenuItemClick="Menu2_MenuItemClick">
            <StaticSelectedStyle CssClass="StaticSelectedStyle"></StaticSelectedStyle>
            <Items>
                <asp:MenuItem Text="&#1063;&#1072;&#1089;&#1086;&#1074;&#1099;&#1077;" Value="1" />
                <asp:MenuItem Text="&#1057;&#1091;&#1090;&#1086;&#1095;&#1085;&#1099;&#1077;" Value="2"
                    Selected="True" />
            </Items>
        </asp:Menu>
        </div>
    </div>

答案 1 :(得分:1)

这是你想找的那种吗?

<div id="nav-main" style=" width: 100%; min-width: 900px; border:1px solid green;">
  <div style="min-width:258px; min-width:30%;  float: left; background-color:#CCC;"> <a href="javascript:void(0);" onclick="select();" 
                            style="font-size: small;"> &#1048;&#1079;&#1084;&#1077;&#1085;&#1080;&#1090;&#1100; &#1082;&#1086;&#1076; &#1080; &#1087;&#1088;&#1080;&#1084;&#1077;&#1095;&#1072;&#1085;&#1080;&#1077;</a></div>
  <div style="float: left; background-color:#FFFFCC; width:70%;">
    <asp:Menu ID="Menu2" runat="server" Orientation="Horizontal" Width="521px" MaximumDynamicDisplayLevels="0"
            StaticSelectedStyle-CssClass="StaticSelectedStyle" Height="32px" StaticSubMenuIndent="18px"
            OnMenuItemClick="Menu2_MenuItemClick">
      <StaticSelectedStyle CssClass="StaticSelectedStyle"></StaticSelectedStyle>
      <Items>
        <asp:MenuItem Text="&#1063;&#1072;&#1089;&#1086;&#1074;&#1099;&#1077;" Value="1" />
        <asp:MenuItem Text="&#1057;&#1091;&#1090;&#1086;&#1095;&#1085;&#1099;&#1077;" Value="2"
                    Selected="True" />
      </Items>
    </asp:Menu>
    right</div>
  <div style="clear:both;"></div>
</div>