Позиционирование двух плавающих блоков в абсолютном делении

Question

вот код

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

два серых сквера ("float 1" и "float 2") должны быть расположены рядом друг с другом в абсолютном позиционном делении "submenu_container", относящемся к

"menu 3".

Может ли кто-нибудь помочь мне, пожалуйста? (

Thx!

Answer 1

Ширина вашего подменю ограничена шириной вашего элемента 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 2

Если у вас всегда будет два элемента ("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)
});

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