Question

我似乎无法让页面的右侧/列在顶部进行刷新。我已经附上了一张图片，告诉你们我的意思。

的jsfiddle

图片

http://oi57.tinypic.com/3128hew.jpg

代码

  <div class="top-column">
  <div class="image"><img src="http://www.hoax-slayer.com/images/blue-tiger-      source.jpg" width="730" height="360"></div></div>                                   
  <div id="content">
  <div class="middle-column">
  <article class="in-column">
  <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="150"       height="100">
  <b>Bengal Tiger</b></article>     
  </div>

  <div id="side">   
<li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120"       height="79" />
    <p class="side-news">Bengal       Tiger</p></a>                         
      </li> 
    <li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120"       height="79" />
    <p class="side-news">Bengal       Tiger</p></a>                         
      </li> 
    <li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120"       height="79" />
    <p class="side-news">Bengal       Tiger</p></a>                         
      </li> 
    <li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120"       height="79" />
    <p class="side-news">Bengal       Tiger</p></a>                         
</li> 

  </div></div>      
  <div class="block"> 
  </div>
  </div>

CSS

  img {
border: 0px;
display: block;
margin: 0 auto;
  }
  header#head { 
padding-left: 20px; 
position: relative; 
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #000;      
  }
  .image { 
     position: relative; 
     cursor: pointer;  
     float:left;   
  }
  #container {
width: 1055px;
margin: 0 auto;
text-align: left;
background: #fff;
padding: 0; 
margin-top:-26px;   
  }
  #content {    
overflow:hidden;
width:1053px;   
height:100%;    
border: 1px solid #dddddd;  
  }
  #side{
width:312px;    
height:100%;  
float:left;     
margin-top:-10px;   
padding-left:10px;
background-color:#f3f3f3;
  }
  .block {
border-top: 1px solid #dddddd;          
text-align: center; 
background-color:#000;
width:1053px;
height:365px;
position:relative;  
font-size:15px;
color: #fff;    
  }
  .list{
width:300px; 
border-bottom: 1px solid #dddddd;   
display: inline-block; 
margin-top:10px;    
  }
  .middle-column {
width: 730px;    
float: left;    
border-right: 1px solid #dddddd;
  }
  article.in-column {       
text-align: left;
padding: 15px;  
border-bottom:1px solid #dddddd;
height:100%;
  }
  article.in-column img{
float:left; 
margin-right:15px;      
  }
  .list img{
float:left;
margin-right:15px;
border:1px solid #ddd;
margin-bottom:10px;
  }
  .top-column {
float: left;
width:730px;
height:360px;           
border-right: 1px solid #000;   
border-left: 1px solid #000;
border-bottom: 1px solid #000;  
  }

Answer 1

将样式添加到

的侧栏

position:fixed;
top:0;
left:/*width of whatever width the stuff to the left of the side bar has*/

希望我帮助

Answer 2

已从内容div中删除侧边栏并将其单独放置而不是使用float：left我使用了display：inline-block。这里有更新的小提琴， http://jsfiddle.net/vDUE7/9/ 希望这能解决你的问题。

<强> HTML

<div class="top-column">
<div class="image"><img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="730" height="360"></div></div>                                   



<div id="side"> 
<li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120" height="79" />
    <p class="side-news">Bengal Tiger</p></a>                           
</li> 
    <li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120" height="79" />
    <p class="side-news">Bengal Tiger</p></a>                           
</li> 
    <li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120" height="79" />
    <p class="side-news">Bengal Tiger</p></a>                           
</li> 
    <li class="list">
    <img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg"  width="120" height="79" />
    <p class="side-news">Bengal Tiger</p></a>                           
</li> 

</div>
<div id="content">
<div class="middle-column">

<article class="in-column">
<img src="http://www.hoax-slayer.com/images/blue-tiger-source.jpg" width="150" height="100">
<b>Bengal Tiger</b></article>       
</div>

</div>
<div class="block"> 
</div>
</div>

<强> CSS

img {
border: 0px;
display: inline-block;
margin: 0 auto;
}
header#head {   
padding-left: 20px; 
position: relative; 
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #000;      
}
.image { 
  position: relative; 
  cursor: pointer;  
  float:left;   
}
#container {
width: 1055px;
margin: 0 auto;
text-align: left;
background: #fff;
padding: 0; 
margin-top:-26px;   
}
#content {  
overflow:hidden;

height:100%;    
border: 1px solid #dddddd;  
}
#side{
width:312px;    
height:100%;  
display:inline-block;   
background-color:#f3f3f3;
}
.block {
border-top: 1px solid #dddddd;          
text-align: center; 
background-color:#000;
width:1053px;
height:365px;
position:relative;  
font-size:15px;
color: #fff;    
}
.list{
width:300px; 
border-bottom: 1px solid #dddddd;   
display: inline-block; 
margin-top:10px;    
}
.middle-column {
width: 730px;    
float: left;    
border-right: 1px solid #dddddd;
}
article.in-column {     
text-align: left;
padding: 15px;  
border-bottom:1px solid #dddddd;
height:100%;
}
article.in-column img{
float:left; 
margin-right:15px;      
}
.list img{
float:left;
margin-right:15px;
border:1px solid #ddd;
margin-bottom:10px;
}
.top-column {
float: left;
width:730px;
height:360px;           
border-right: 1px solid #000;   
border-left: 1px solid #000;
border-bottom: 1px solid #000;  
}

不能让div在页面顶部刷新

2 个答案: