展开多个div以适应屏幕

Question

的水平宽度我在做这有三个部分，以它的菜单： 菜单链接离开 图片 菜单链接权

我需要在左侧和右侧的菜单链接扩大屏幕的整个宽度和图像在固定宽度和居中的div中。

所以，我有以下设置

<div class="menuLinks">Some links</div> 
<div class="menuImage"><img src="" alt="" /></div> 
<div class="menuLinks">Some links</div> 

而CSS

.menuLinks{width:100%;float:left;} 
.menuImage{width:400px;float:left;} 

任何帮助，这是非常赞赏。 感谢

Answer 1

这是一个solution这是完全CSS和HTML。

CSS

#wrapper{ 
    width:100%; 
    text-align:center; 
    overflow: auto; 
} 
#block-images{ 
    background-color: silver; 
    width: 400px; 
    margin:0 auto; 
    position:absolute; 
    left: 50%; 
    margin-left: -200px; 
} 
.wrapper-menu-left{ 
    float:left; 
    width:50%; 
} 
.wrapper-menu-right{ 
    float:right; 
    width:50%; 
} 
.menuBlock{ 
    text-align: left; 
} 
#mLeft{ 
    background-color: green; 
    margin-right:200px; 
} 
#mRight{ 
    background-color: navy; 
    margin-left:200px; 
} 

HTML

<div id="wrapper"> 
    <div class="wrapper-menu-left"> 
     <div class="menuBlock" id="mLeft">left</div> 
    </div> 
    <div class="wrapper-menu-right"> 
     <div class="menuBlock" id="mRight">right</div> 
    </div> 
    <div id="block-images">images</div> 
</div>

Answer 2

这里是你的HTML菜单：

<div class="menuLinks" name="links">Some links</div> 
<div class="menuImage"><img src="" alt="" /></div> 
<div class="menuLinks" name="links">Some links</div> 
<div class="menuImage"><img src="" alt="" /></div> 
<div class="menuLinks" name="links">Some links</div> 

不仅仅是使用CSS大小menuImages：

<style> 
.menuImage{width:400px;float:left;} 
</style> 

使用JavaScript负载发现屏幕分辨率和发现各个环节的div大小：

<script language="javascript"> 
function resizeMenu() 
{ 
    var linksList = document.getElementsByName('links'); 
    for(var i = 0; i < linksList.length; i++) 
    { 
     linksList[i].style.width = (screen.availWidth 
     - 2 * (400) //size of total images) 
     /linksList.length; // total number of linksCount 
    } 
} 

resizeMenu(); 
</script>