如何展开一个小于100％的动态宽度的父级的子div

我需要在元素内部建立一个菜单，该元素可以具有不同的宽度和不同的页面位置。如何展开一个小于100％的动态宽度的父级的子div

我想创建出现时，悬停元素上的编辑菜单，但我需要菜单的宽度与整个页面

我需要使用位置：绝对不“打扰”页面布局

HTML

<div class="container row"> 
    <div class="col-md-6 left"> 
     <nav>nav</nav> 
     <div class="content">content left</div> 
    </div> 
    <div class="col-md-6 right"> 
     <nav>nav</nav> 
     <div class="content">content-right</div> 
    </div> 
</div>

CSS

.container { 
    width:100%; 
    background:#eee; 
    padding:30px; 
} 
nav { 
    height:30px; 
    background:#999; 
    display:none; 
    width:100%; 
    position:absolute; 
    top:-30px; 
    left:0; 
} 
.left { 
    background:#ddd; 
    height:300px; 
} 
.right { 
    background:#ccc; 
    height:200px; 
    margin-top:100px; 
} 
.col-md-6:hover > nav { 
    display:block; 
}

任何建议表示赞赏！感谢

来源

2015-03-02 petrand87

我将把我的答案在这里没有太多的解决方案http://jsfiddle.net/bkoqv52e/1/。问题是bootstrap在你的col中放置一个位置。所以导航不能打破它。但是如果你删除了这个位置，它将会起作用。 – aahhaa 2015-03-02 16:12:03

@Pik_at伟大的解决方案，我从来没有使用'静态'，所以我更新了我的http://jsfiddle.net/bkoqv52e/2/ – aahhaa 2015-03-02 16:15:42

谢谢！我失去了顶尖的位置，最终没有这个工作！我很傻:) – petrand87 2015-03-02 16:34:05

没有JS，你可以定义。左和.right定位静以参考导航到容器上的相对位置一样：

.container { 
 
    width:100%; 
 
    background:#eee; 
 
    padding:30px; 
 
    position: relative; 
 
} 
 
nav { 
 
    height:30px; 
 
    background:#999; 
 
    display:none; 
 
    width:100%; 
 
    position:absolute; 
 
    left:0; 
 
} 
 
.left { 
 
    background:#ddd; 
 
    height:300px; 
 
    position: static; 
 
} 
 
.right { 
 
    background:#ccc; 
 
    height:200px; 
 
    margin-top:100px; 
 
    position: static; 
 
} 
 
.col-md-6:hover > nav { 
 
    display:block; 
 
}

<div class="container row"> 
 
    <div class="col-md-6 left"> 
 
     <nav>nav</nav> 
 
     <div class="content">content left</div> 
 
    </div> 
 
    <div class="col-md-6 right"> 
 
     <nav>nav</nav> 
 
     <div class="content">content-right</div> 
 
    </div> 
 
</div>

来源

2015-03-02 16:08:58

如何展开一个小于100％的动态宽度的父级的子div

回答

相关问题