展開多個div以適應屏幕

的水平寬度我在做這有三個部分，以它的菜單：菜單鏈接離開圖片菜單鏈接權展開多個div以適應屏幕

我需要在左側和右側的菜單鏈接擴大屏幕的整個寬度和圖像在固定寬度和居中的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;}

任何幫助，這是非常讚賞。感謝

來源

2011-04-15 Peuge

這是一個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>

來源

2011-04-15 08:25:36

很明顯，邊框和背景僅用於可視性目的:-) – 2011-04-15 08:27:54

快照，我應該在Chrome中測試它=（我將編輯我的文章。 – 2011-04-15 08:30:26

使用[fiddle]（http://jsfiddle.net/Khez/2zLPF /）！ – Khez 2011-04-15 08:33:19

這裏是你的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>

來源

2011-04-15 07:42:33

感謝您的答覆。有沒有可能做到這一點沒有JavaScript？ – Peuge 2011-04-15 07:52:26

，因爲您必須將某些div大小設置爲固定值以及與窗口大小相關的其他大小，唯一的方法是在客戶端上檢測瀏覽器分辨率，然後設置元素大小; – 2011-04-15 08:02:45

展開多個div以適應屏幕

回答

相關問題