html - 在绝对定位除法中定位两个浮动块

Question

这是代码

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

在与<li>“menu 3”相关的绝对定位分区“submenu_container”中，两个灰色方块（“float 1”和“float 2”）必须彼此并排放置。

请问有人可以帮我弄到吗？:(

谢谢！

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