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>

展开多个div以适合屏幕的水平宽度

2 个答案: