图像不适合容器并在div外运行

Question

我有一个内容（div），其中必须部署图像网格，但不幸的是图像网格不适合容器，它用完了div。我已经在jsfiddle上传了我的代码：

JsFiddle

我的Html代码：

<div id="contentwrap">
<div id="content">
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.</p>

<div class="MyBox">
    <ul id="grid">
       <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>
       <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>
       <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>
       <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>  
    </ul>                                    
</div>       
</div>
</div>

Answer 1

简单添加

 height:auto;
overflow:auto;

到class = MyBox

Working JsFiddle

Answer 2

这似乎是一个“clearfix”问题。将其添加到您的CSS：

#content:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

最终，您可以将其更改为班级，并在遇到此问题的任何地方实施。

Answer 3

也添加此样式。

.MyBox {
display: inline-table;
}

Answer 4

查看更新的小提琴

FIDDLE

将overflow:auto;添加到#content

<强> CSS：

#content {
    background: #FFF8DC;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin: 5px;
    padding: 10px;
    overflow:auto;
    display:block;
}