当前位置：首页 → 问答吧 → 当#content内容比较多的时候，右侧的#links就会被挤走，怎么办呢？

当#content内容比较多的时候，右侧的#links就会被挤走，怎么办呢？

时间：2011-11-30

来源：互联网

当#content内容比较多的时候，右侧的#links就会被挤走。content不会自动折行，怎么来改进呢，什么原因呢？谢谢大家！代码如下

HTML code

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
<!--
body{
    margin:0px;
    padding:0px;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;}
#container{
    position:relative;
    width:100%;
}
#banner{
    height:80px;
    border:1px solid #000;
    text-align:center;
    background-color:#a2d9ff;
    padding:10px;
    margin-bottom:2px;
}
#content{
    float:left;
    padding-right:200px;
    background-color:#0033CC;
}
#links {
    float:left;
    width:200px;
    text-align:center;
    border:1px solid #000;
    margin-left:-200px;
    text-align:center;
    background-color:#0099CC;
}

#foot{
    clear:both;
    text-align:center;
    height:30px;
    border:1px solid #000;
}
-->
</style>
</head>

<body>
<div id="container">
  <div id="banner"></div>
  
  <div id="content"></div>
  <div id="links">links<br />
    links<br />
    links<br />
    links<br />
    links<br />
    links<br />
 
 
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

作者: whsubway 发布时间: 2011-11-30

#content

定义一个宽度，然后加个overflow:hidden;

作者: MuBeiBei 发布时间: 2011-11-30

没搞懂，你content里面又没内容，link也不是设置在右边的，标题的疑问哪里来的

HTML code

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
<!--
body{
    margin:0px;
    padding:0px;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
}
#container{
    position:relative;
    width:100%;
}
#banner{
    height:80px;
    border:1px solid #000;
    text-align:center;
    background-color:#a2d9ff;
    padding:10px;
    margin-bottom:2px;
}
#content{
    float:left;
    padding-right:200px;
    background-color:#0033CC;
}
#links {
    float:right;
    width:200px;
    text-align:center;
    border:1px solid #000;
    margin-left:-200px;
    text-align:center;
    background-color:#0099CC;
}

#foot{
    clear:both;
    text-align:center;
    height:30px;
    border:1px solid #000;
}
-->
</style>
</head>

<body>
<div id="container">
  <div id="banner"></div>
  
  <div id="content"></div>
  <div id="links">links<br />
    links<br />
    links<br />
    links<br />
    links<br />
    links<br />
 
 
  </div>
  <div id="footer"></div>
</div>
</body>
</html>