Question

之前我问了一个关于div容器水平定位的问题，现在我有跟进和相关问题：

（1）正如您在下面的HTML代码中所看到的，我在“content_bottom”容器的左侧放置了一个“column_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">&nbsp;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;
}

Answer 1

使用此css：

添加.content_bottom的包装器

.content_bottom_wrapper {
    width: 100%;
    margin-left: -9.58em;
    float: right;
}

并将其添加到content-bottom：

margin-left: 9.58em;

9.58em = .column_bottom的宽度+ padding-right on .column_bottom

http://jsfiddle.net/p93fM/

Answer 2

下面：

Live Demo

我将其添加到CSS中的.content_bottom

width:640px;

您可以根据需要调整边距。

div容器尺寸问题

2 个答案: