在绝对定位除法中定位两个浮动块答案

【问题标题】：Positioning two floating blocks in absolute positioned division在绝对定位除法中定位两个浮动块
【发布时间】：2012-06-18 20:55:36
【问题描述】：

这里是代码

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

两个灰色方块（“float 1”和“float 2”）必须在与

“menu 3”相关的绝对定位分区“submenu_container”中并排放置。

请有人帮我弄到它吗？ :(

谢谢！

【问题讨论】：

您的菜单li 的宽度是 100 像素，其中的两个浮动都是 100 像素宽。您不能将它们并排放置在 100px 的容器中。请解释或更正您要执行的操作。也许发布最终结果的屏幕截图？
imageshack.us/photo/my-images/846/resultr.jpg

标签： html css css-float absolute

【解决方案1】：

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

如果元素的宽度（“float1 and 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)
});

【讨论】：

好的，我认为 JavaScript 解决方案对我来说是最好的方法。只是想用我们的html来弄清楚。谢谢！

【解决方案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>

【讨论】：

Thx，但我需要根据其内容宽度计算“submenu_container”div 宽度（内部可能有一个、两个或三个浮动分区）。可能吗？你的意思是换行吗，说到html错误？
然后增加你的#top div的大小，它目前设置为500px，如果你试图让你的子菜单独立打开它会突破你的“top” div。
当然，在原始标记中，#top div 的宽度设置得足够宽。问题是将 submenu_container 的位置设置在正确的位置，并根据其内容自动设置其宽度。你的意思是没有 JavaScript 也可以吗？
#top div 的最终宽度是多少？因为想一想，想象一下如果你的下拉菜单中有六个元素，当前 500px 宽度的顶部 div，你可以让它们脱离那个容器吗？看看这个例子来告诉你我的意思：jsfiddle.net/77NBM/18
是的，在我的情况下没关系 :) （好吧，六个有点多，我最多有 3 个，没关系）

【解决方案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;
}

【讨论】：