添加html时div下移
你们可能很快就能回答这个问题，但我花了几天时间试图弄清楚这个问题。
我正在开发一个响应式网站，希望有一个 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回答
-
慕尼黑的夜晚无繁华
从 ddm_menu 类更改中删除 display:inline-blockul.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;}
随时随地看视频慕课网APP
相关分类
Html5
