我有以下几点:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
CSS:
div {
height: 178px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#left, #center, #right {
display: table-cell;
}
#center {
width: 1100px;
}
#left {
background: url(left.gif) repeat-x;
}
#center {
background: url(center.gif) no-repeat center center;
}
#right {
background: url(right.gif) repeat-x;
}
参见:小提琴
我想在中间部分的橙色部分放置一个水平菜单,在黄色部分放置另一个水平菜单;
我尝试了这个:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center">
<ul id="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul id="menu2">
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="right"></div>
</div>
添加了CSS:
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
参见:小提琴
但是没有没有成功,请帮忙!
您可以使用相对定位(https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning)例如
的CSS
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
编辑-与最近的评论有关
为了删除菜单图像周围的白色间距就需要一套margin:0
用于body
覆盖默认的用户代理样式规则元件。
body{
margin:0px;
}
编辑-回复最新评论
注意到的白色间隙是从一开始就在ff中引起的(测试原始小提琴http://jsfiddle.net/6GE3x/27/show/),当内容放置在#center
div中时。因此,在使用display:table
和display:table-cell
添加内容时存在一些问题。
为了避免使用实际的表格进行布局以及与之相关的所有后果,可以使用绝对布局按如下方式放置中心零件:
的CSS
div {
height: 178px;
}
#wrapper {
/* display: table;
table-layout: fixed; */
width: 100%;
}
#left, #right {
/* display: table-cell; */
/*the following will make #left and #right take full width*/
float:left;
width:50%;
}
#center {
width: 1100px;
/*the following will position #center in the center*/
position:absolute;
left:50%;
margin-left:-550px;
}
#left {
background: url(http://dentaliran.ir/left.gif) repeat-x;
}
#center {
background: url(http://dentaliran.ir/center.gif) no-repeat center center;
}
#right {
background: url(http://dentaliran.ir/right.gif) repeat-x;
}
#menu1 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:85px;
right:30px;
}
#menu1 li {float:right; margin-left:5px;}
#menu1 a {color:violet;}
#menu2 {list-style-type:none; margin:0; padding:0; overflow:hidden;
position:relative;
top:110px;
right:30px;
}
#menu2 li {float:right; margin-left:5px;}
#menu2 a {color:#000;}
body{
margin:0px;
}
已经在ie8,ie9,chrome32.x,ff25.x中进行了测试
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句