之前我问了一个关于 div 容器水平定位的问题，现在我有后续和相关问题:
(1) 正如您在下面的 HTML 代码中看到的，我将一个“column_bottom”容器(用于链接)放置在“content_bottom”容器(用于页面主要内容)的左侧。 当我在“content_bottom”容器中输入更多内容，使其高度超过左侧“column_bottom”容器的高度时，整个“content_bottom”容器会移至“column_bottom”容器下方。我该怎么做才能使左侧“column_bottom”容器的高度动态匹配右侧“content_bottom”容器的高度(并且它们保持水平相邻)？
(2) 正如您在下面的 CSS 样式表中看到的，我尝试通过反复试验手动设置“column_top”和“column_bottom”的宽度以匹配 em 单位。这种方法在不同系统上的不同浏览器上会出现问题吗？我该如何确保“column_top”和“column_bottom”宽度始终匹配？
感谢您的帮助。
这是 HTML:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>this is the site's title</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">site<br>
</div>
<div class="content_top"> title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1<br>
</a></li>
<li><a href="#">link 2<br>
</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">main content here<br>
</div>
</div>
</body>
</html>
这是 CSS:
body {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
color: #cccccc;
background-color: black;
font-size: 1em;
}
.wrapper {
margin: auto;
min-width: 60em;
max-width: 60em;
font-family: Arial,Helvetica,sans-serif;
width: 60em;
color: #cccccc;
}
.column_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid black;
width: 3.2em;
min-width: 3.2em;
float: left;
padding-top: 2em;
text-align: right;
color: #333333;
max-height: 1em;
background-color: #f4f4f4;
font-size: 3em;
min-height: 1em;
max-width: 3.2em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.content_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid #f4f4f4;
padding-top: 2em;
font-size: 3em;
min-height: 1em;
text-align: left;
max-height: 1em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.column_bottom {
width: 9.28em;
text-align: right;
padding-top: 3em;
color: #333333;
border-bottom-width: 0;
background-color: #f4f4f4;
border-right-width: 0;
padding-right: 0.3em;
float: left;
border-left-width: 0;
min-width: 9.28em;
max-width: 9.28em;
}
.content_bottom {
padding: 3em 5em 5em;
border-collapse: separate;
text-align: left;
float: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
text-decoration: none;
color: #333333;
list-style-type: none;
font-weight: inherit;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
最佳答案
使用以下 css 添加 .content_bottom 的包装:
.content_bottom_wrapper {
width: 100%;
margin-left: -9.58em;
float: right;
}
并将其添加到内容底部:
margin-left: 9.58em;
9.58em = .column_bottom 的宽度 + .column_bottom 的右内边距
关于css - div 容器大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4981021/