代码之家 › 专栏 › 技术社区 › cnd

浮动位置错误:左DIV

css html asp.net

cnd · 技术社区 · 15 年前

        <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>

看不到左边的分区。 Firebug显示在右分区下:(

如何将左心室移到左侧,确定我做错了什么?

2 回复 | 直到 14 年前

jaywon 15 年前

我不确定我完全明白你想做什么,但是如果让两个潜水器在旁边漂浮,我想这就是你要做的,试试下面的。我把集装箱从 95% 宽度到固定宽度,以允许您为分隔符定义的固定大小。我把第二个分区改为 float:left 也。即使你想要一个 div 浮到左边的右边并不意味着你需要使用 float:right . 如果它们都是 浮动:左 并且它们定义的宽度适合它们的包含元素,第二个将浮动到第一个元素的右侧。希望有帮助。

<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>

AJFMEDIA 15 年前

这是你要找的那种吗?

<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>