Css Div添加项目时移动Div_Css_Html_Layout

Css Div添加项目时移动Div

css html layout

Css Div添加项目时移动Div,css,html,layout,Css,Html,Layout,我有一个集装箱舱和两个高度应该相同的舱#边栏div位于左侧，as#Content div应位于右侧每当我向侧边栏添加内容时，它就会向下推content Div，我有点不知所措 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

我有一个集装箱舱和两个高度应该相同的舱#边栏div位于左侧，as#Content div应位于右侧

每当我向侧边栏添加内容时，它就会向下推content Div，我有点不知所措

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/2009_07.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>View Applicants</title>

<style type ="text/css">
li
{
display:inline;

background-color: #c5e8cf;
}

a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}

a.side { border-bottom: 2px solid black;
    background-color: #e3e7ec;
    }
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
        display:inline-block;
        font-size: 20px;
        background-color: #e3e7ec;
        border-bottom: 2px solid black;
        padding-bottom: 20px;
        }
label.side:hover { background-color: #dde504;}

div#header {
    position: float;
    background-image: url("../images/header.jpg");
    background-repeat: no-repeat;
    border-bottom: solid 1px #999999;
    height: 97px;
           Width: 1000px;
        margin-left: 114px;
        margin-top: 10px;
        background-size: 100%;
}

div#menu { 
position: float;    
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
      margin-left: 115px;
padding-top:5px;

background-color: #e3f6ea;
}
#menu-content { 
margin: auto;
width:100%;
background-color: #c5e8cf;

}

div#container{

border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}

div#sidebar { 
    position: relative;
border:2px solid #999999;
Width: 131px;

padding-bottom: 1000px;
margin-bottom: -1000px;

background-color: #c5cfd9;
overflow: hidden;
}

div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
}

div#footer { position: relative;
        border: solid 2px #999999;

        width: 996px;
        height: 50px;
        background-color: #FFFFFF;
        margin-left: 115px;
}

#body { background-color: #6b86a3;}


</style>

</head>

<body id = "body" >

<div id="header"> </div>
<div id = "menu"> 


<div id="menu-content">
<ul>
      <li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>


      <li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>

  </li>
      <li><a class="menu" href="../images/header.jpg">View Applicants</a></li>

  </ul>
</div>
</div>
  <div id="container" >
    <div id="sidebar"> 
    <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
       <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
    </div>
    <div id="content">



</div>
</div>
<div id ="footer"> </div>

</body>
</html>


查看申请者
锂
{
显示：内联；
背景色：#c5e8cf；
}
a、 菜单：链接{颜色：#2b2f2c；}
a、 菜单：已访问{颜色：#2b2f2c；}
a、 菜单：悬停{背景色：#dde504；}
a、 侧边{边框底部：2px纯黑；
背景色：#e3e7ec；
}
a、 侧面：链接{color:#2b2f2c；}
a、 一方：访问{color:#2b2f2c；}
a、 侧面：悬停{背景色：#dde504；}
标签侧{宽度：131px；
显示：内联块；
字体大小：20px；
背景色：#e3e7ec；
底部边框：2件纯黑；
垫底：20px；
}
label.side:hover{背景色：#dde504；}
div#头{
位置：浮动；
背景图像：url（“../images/header.jpg”）；
背景重复：无重复；
边框底部：实心1px#999999；
高度：97px；
宽度：1000px；
左边距：114px；
边缘顶部：10px；
背景大小：100%；
}
div#菜单{
位置：浮动；
左边框：实心1px#999999；
右边框：实心1px#999999；
边框底部：实心1px#999999；
宽度：998px；
左边距：115px；
垫面：5px；
背景色：#e3f6ea；
}
#菜单内容{
保证金：自动；
宽度：100%；
背景色：#c5e8cf；
}
分区#集装箱{
左边框：实心1px#999999；
右边框：实心1px#999999；
边框底部：实心1px#999999；
宽度：998px；
利润上限：3倍；
左边距：115px；
高度：自动；
溢出：隐藏；
}
div#侧边栏{
位置：相对位置；
边框：2个实心#999999；
宽度：131px；
垫底：1000px；
边缘底部：-1000px；
背景色：#c5cfd9；
溢出：隐藏；
}
分区内容{
位置：相对位置；
垫底：1000px；
边缘底部：-1000px；
左边框：实心1px#999999；
顶部：-65px；
左：132px；
背景色：#F6F4；
}
div#footer{位置：相对；
边框：实心2px#999999；
宽度：996px；
高度：50px；
背景色：#FFFFFF；
左边距：115px；
}
#正文{背景色：#6b86a3；}

对css有点陌生。谢谢

float：顶部是错误的
浮动
只能是左
或右

添加<代码>浮动：右到侧边栏和浮动：左到您的容器
 div#sidebar { 
        position: relative;
    border:2px solid #999999;
    Width: 131px;

    padding-bottom: 1000px;
    margin-bottom: -1000px;

    background-color: #c5cfd9;
    overflow: hidden;


    float:right;


    }

    div#content {
    position: relative;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-left: solid 1px #999999;
    top: -65px;
    left: 132px;
    background-color: #f6f4f4;

    float:left;

    }

这是您想要实现的更常见的目标：
CSS
#container {
    border: solid 1px #999999;
    border-top: none;
    width: 998px;
    margin-top: 3px;
    margin-left: 115px;
}

#sidebar {
    float: left;
    width: 131px;
    border: 2px solid #999999;
}

#content {
    float: left;
    width: 131px;
    border-left: 1px solid #999999;
}

.floatClear {
    clear: both;
}

HTML
<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                Text
            </div>
            <div id="content">
                Text
            </div>
            <div class="floatClear"></div>
        </div>
    </body>
</html>

max height
CSS属性应该可以完成这项工作
将#边栏和#内容的最大高度设置为相等值
如果您希望它们中的任何一个的高度增长超过最大高度，您可以添加溢出：滚动。
您也应该发布您的HTML，如果不看到它，将很难提供帮助。没有所谓的float:top
。这里有一个很好的浮动教程：编辑：我猜你没有将边框的宽度添加到侧边栏的宽度中。给主体一个ID有什么意义？这是可行的，但现在隐藏溢出就不行了。。不过边框框会处理好的，非常感谢你给你的容器height:auto这将不适用于您的溢出。使用类似于高度：400px的东西；溢出：隐藏而高度将满足您的定制需求。即使它屈从于父代的高度来继承，它在所有浏览器中的行为也很可能不一样
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;