HTML、CSS 内联 block Div 跳出位置

Question

我有一个网页，其中有一个应用了 text-align:center; 的父 div 和多个应用了 display:inline-block; 的子 div，但是一些较薄的 div 在页面上跳出位置。你可以看到它 [removed] 页面上最后一张图片跳出位置并向上移动到它之前的图片旁边。该页面上的最后一张图片应位于最后两个文本 block 之间。

如果 div 的宽度很小，我怎样才能阻止它们跳出位置？

如果将其视为 inline-block 元素，我可以让图像从新行开始吗？

代码:

#article_container {
    width:749px;
    height:100%;
    text-align:center;
    float:left;
}

.article_content_divs {
    width:720px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    text-align:justify;
}

Answer 1

刚发现问题出在一个 float 属性上，去掉它就解决了。

我没有 float 子元素，而是向元素添加了 clear:both;，一切都正确对齐。

这是我更新后的代码:

.article_content_divs {
    width:720px;
    // float:left; <--------- This was messing it up
    margin-left:5px;
    margin-top:5px;
   text-align:justify;
}