0

我在使用动态 div 调整为静态 div 时遇到了一些问题。起初，我以为它只是 IE9 本身，但在 Chrome 和 Firefox 中测试后，我发现我遇到了更大的问题。

我想要做的是让左侧的动态 div 调整为右侧的静态 div，但是，我正在阅读使用 margin-left 和 margin-right 做的事情并没有正确处理它。

的HTML：

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
    <div class="Heading">aaaa</div>
    <div class="CharacterPanel"></div>
    <div class="content">aaa</div>
</div>

</body>

</html>

CSS：

div.container {
overflow: hidden;
width: 100%;
height: 100%;
body {
background-color: #000000;
div.Heading {
border-top-style: solid;
border-width: thin;
border-color: #000000;
background-color: #808080;
width: 100%;
height: 45px;
float: left;
border-right-style: solid;
overflow: hidden;
margin-left: -151px;
}
div.content {
overflow: auto;
border-width: thin;
border-color: #000000;
width: 100%;
height: 500px;
float: left;
background-color: #808080;
border-top-style: solid;
border-right-style: solid;
margin-left: -151px;
display: inline;
position: relative;
}
div.CharacterPanel {
border-width: thin;
border-color: #000000;
float: right;
width: 150px;
height: 550px;
background-color: #808080;
border-top-style: solid;
text-align: center;
margin-left: 0px;
margin-right: 0px;
}

问题发生在这 3 个特定的 div 标签上。查看 HTML 页面时，div 组合在一起，问题是由于 margin-left 设置为负数，它的作用就像整个 div 标签向左移动 151 像素，将所有字符封装到 151 像素为止关闭页面进入容器的隐藏溢出。

4

0 回答 0