日期:2014-05-17  浏览次数:20937 次

请教:如何让右侧内容不被左侧的图片顶到下方去?(有代码)
在浏览器非最大化的时候,如何让右侧内容不被左侧的图片顶到下方去?
谢谢!

<html>
<head>
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "   />
<style   type= "text/css ">
p{
margin:2px   0   2px   0;
}
#contain{
margin-right:   auto;
margin-left:   auto;
clear:both;
width:   98%;
}  
#left{
float:   left;  
margin:   1px   0px   1px   0px;
padding:   0px;  
width:   13%;
height:auto;
text-align:left;
}
#right{
float:   right;  
margin:   10px   0px   10px   1px;
padding:0px;  
width:   86%;  
text-align:left;
}
.content_detail{
font-size:11pt;
font-family:arial,helvetica,sans-serif;
color:#000;
padding:0   5px   0   10px;
margin:0   0   0   0;
background-color:#FFF;
border:1px   solid   #2C762D;
}
.normal{
text-align:left;
padding:10px   0   3px   11px;
margin:0   0   0   0;
}
</style>
</head>

<body>
        <div   id= "contain ">
                        <div   id= "left ">
<img   src= "http://list.mp3.baidu.com/list/images/tupic/movie_huayudianying01.jpg "   width= "116px "   height= "88px "/>
                        </div>
                        <div   id= "right ">
                                  <div   class= "content_detail ">
                                        <p   class= "normal "> sb朱广沪 </p>
                                  </div>
                        </div>
        </div>
</body>
</html>


------解决方案--------------------
在#left里添加clear:left;
在#right里添加clear:right;
-------------------------
------解决方案--------------------
限制外面的DIV contain的最小宽度

#contain{
/*for ff*/
min-width: 793px;
/*for ie*/
han:expression(this.style.width = this.offsetParent.clientWidth <793 ? "793px " : "100% ");

}