css - contentwrap 外的图像网格流

Question

我正在创建图像网格。它在 contentwrap 之外工作正常，但在 contenwrap 中时，所有图像都流到 contentwrap 之外。我的代码有什么问题？我面临的另一个问题是图片说明。我无法为图像添加标题。

#contentwrap {
    width: 850px;
    float: left;
    margin: 0 auto;
}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin: 5px;
}

ul#grid {
  list-style: none;
  margin: 0 0 0;
  width: 550px;  
  }

#grid li {
  float: left;
  margin: 0 0 10px 5px;
  } 

.portfolio {
  padding: 0px;
  margin-left: 0; margin-right: 0;  margin-top:0;
  width: 513px;
  font-family: arial, serif; 
  text-align: center;
  }

#grid li a:hover img {
  opacity:0.3;  filter:alpha(opacity=30);
  }

#grid li img {
  background-color: white;
  padding: 7px; margin: 0;
  border: 1px dotted #58595b;
  width: 120px;
  height: 98px;
  }  
#grid li a {
  display: block;
  }  

HTML:

<div id="contentwrap">
  <div id="content">
    <div class="portfolio">
        <ul id="grid">
           <li><a href="newgrid.html"><img src="image.jpg"></a></li>
           <li><a href="newgrid.html"><img src="image.jpg"></a></li>
           <li><a href="newgrid.html"><img src="image.jpg"></a></li>   
        </ul>                                    
    </div>
</div>
</div>

Answer 1

这是工作

JsFiddle

简单添加

 height:auto;
overflow:auto;

到 class = MyBox