我正在制作一个包含三个部分的菜单: 左边的菜单链接 图片 右边的菜单链接
我需要左侧和右侧的菜单链接来扩展屏幕的整个宽度,并且图像位于具有固定宽度并居中的 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;}
非常感谢您对此提供的任何帮助。 谢谢
最佳答案
这是一个 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>
关于javascript - 展开多个 div 以适应屏幕的水平宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5673588/