你们可能很快就能回答这个问题，但我花了几天时间试图弄清楚这个问题。我正在开发一个响应式网站，希望有一个 3 列布局，可以随着屏幕大小的调整而改变宽度。我定义了 3 个 div：左 20%、中 59% 和右 20% (99%)。当 div 为空时，它们的格式正确（相同的高度、相同的顶部和底部对齐方式）。当我将菜单添加到第三列时，它将第三列向下移动并将底部链接与其他两列的底部对齐。如果我改变链接的数量，第 3 列会向下移动，并将最终链接的底部与第 1 列和第 2 列的底部对齐。所有参考示例都很简单并且工作正常，因为它们非常简单。附上代码和截图。截屏代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test Page</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>body { background-color:black;}/* Logo Styles */.divlogo { width:96%; height:71px; background-color: #444;}/* Drop Down Menu Styles */.column1 { display:inline-block; width:20%; height:400px; background-color:#888;}.column2 { display:inline-block; width:59%; height:400px; background-color:#444;}.column3 { display:inline-block; width:20%; height:400px; background-color:#888;}.ddm_menu { margin-left:auto; margin-right:auto; padding:0; list-style: none; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:100%;}ul.ddm_menu li { margin-top:4px; margin-left:auto; margin-right:auto; width:160px; height:48px; position:relative; cursor:pointer; display:inline-block;}.ddm_toplnk { -moz-box-shadow:0px 0px 16px #fff inset; -webkit-box-shadow:0px 0px 16px #fff inset; box-shadow:0px 0px 16px #fff inset; border-radius: 8px;}ul.ddm_menu li > a { position:absolute; top:0px; left:0px; width:160px; height:48px; z-index:12;}ul.ddm_menu li span.ddm_wrap{ position:absolute; top:8px; left:0px; width:160px; height:60px; z-index:15;}ul.ddm_menu li span span.ddm_link { color:#fff; font-size:24px; clear:both; margin:auto;}</style></head><body><center><div class="divlogo"></div><hr width="96%"><div class="column1"></div><div class="column2"></div>
1 回答
慕尼黑的夜晚无繁华
TA贡献1864条经验 获得超6个赞
从 ddm_menu 类更改中删除 display:inline-block
ul.ddm_menu li {
margin-top:4px;
margin-left:auto;
margin-right:auto;
width:160px;
height:48px;
position:relative;
cursor:pointer;
display:inline-block;
}
到
ul.ddm_menu li {
margin-top:4px;
margin-left:auto;
margin-right:auto;
width:160px;
height:48px;
position:relative;
cursor:pointer;
}
- 1 回答
- 0 关注
- 113 浏览
添加回答
举报
0/150
提交
取消