Question

我在使用动态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像素之内关闭页面进入隐藏的容器溢出。

动态div调整到静态div

0 个答案: