Question

这是代码

两个灰色尖叫声（“浮动1”和“浮动2”）必须在绝对定位的分区“submenu_container”中彼此相邻放置。 li> “菜单3”。

有人可以帮我搞定吗？：（

THX！

Answer 1

如果你总是有两个元素（“float1和float2”），每个元素为100px，你可以将.submenu_container的宽度设置为220px，它们会相互浮动。像这样http://jsfiddle.net/77NBM/13/

如果元素的宽度（“float1和float2”）是动态的，我建议你设置.submenu_container动态宽度javascript或jQuery的宽度。例如：

$('#main_menu li').each(function(index) {
    var menuWidth=0;
    $(this).children().children().each(function(index) {
         menuWidth+=$(this).outerWidth();
    }
    $(this).children('.submenu_item').width(menuWidth)
});

Answer 2

子菜单的宽度受到li元素宽度的限制，只需在子菜单中添加一些宽度，它们应该浮动：自然地留下

<强> CSS

#top{
    width:500px;
    height:300px;
    position:relative;
    margin:0px auto;
    background:#ccc;
}

#navigation{
    position:absolute;
    width:100%;
    height:50px;
    top:250px;
    left:0px;
    background:#f00
}
#main_menu{
    width:auto;
    height:50px;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

#main_menu li{
    width:100px;
    height:50px;
    margin-right:10px;
    float:left;
    background:#ff0;
    position:relative;
}

#main_menu li a{
    display:block;
    width:inherit;
    height:inherit;
}

.submenu_container{
    position:absolute;
    background:#00f;
    padding:5px;
    left:-5px;
    width:275px;
}

.submenu_item{
    width:100px;
    height:100px;
    float:left;
    background:#eee;
    margin:5px;
}

http://jsfiddle.net/77NBM/17/

顺便说一句，你的html标记充满了错误，你需要看一下。

<强> HTML

<div id="top" class="center">
  <div id="navigation">
    <ul id="main_menu">
      <li>
        <a href="#">Menu 1</a>
      </li>
      <li>
        <a href="#">Menu 2</a>
      </li>
      <li>
        <a href="#">Menu 3</a>
        <div class="submenu_container">
          <div class="submenu_item">
            Float 1
          </div>
          <div class="submenu_item">
            Float 2
          </div>
        </div>
      </li>
      <li>
        <a href="#">Menu 4</a>
      </li>
    </ul>
  </div>
</div>

Answer 3

    #top{
    width:500px;
    height:300px;
    position:relative;
    margin:0px auto;
    background:#ccc;
}

#navigation{
    position:absolute;
    width:100%;
    height:50px;
    top:250px;
    left:0px;
    background:#f00
}
#main_menu{
    width:auto;
    height:50px;
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

#main_menu li{
    width:100px;
    height:50px;
    margin-right:10px;
    float:left;
    background:#ff0;
}

#main_menu li a{
    display:block;
    width:inherit;
    height:inherit;
}

.submenu_container{
    width:auto;
    position:absolute;
    background:#00f;
    padding:5px;
    left:-5px;
}

.submenu_item{
    width:100px;
    height:100px;
    float:left;
    background:#eee;
    margin:5px;
}

将两个浮动块定位在绝对定位的分区中

3 个答案: