图片不适合容器并在容器外运行 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

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

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

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

Answer 2

简单添加

 height:auto;
overflow:auto;

到class = MyBox

Working JsFiddle

Answer 3

也添加这个样式。

.MyBox {
display: inline-table;
}

Answer 4

查看更新后的 Fiddle

FIDDLE

已将 overflow:auto; 添加到 #content

CSS:

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

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

Images do not fit container and run outside div

css

JsFiddle