CSS Float 正在使 div 内容外出？

Question

我正在以 GridView 的形式在 Bootstrap Modal Popup 中显示图像，但是当我在特定的 DIV 标签上应用 CSS 时，它会将图像带到 DIV 标签之外。以下是总代码:

CSS

<style type="text/css">
    .food_img {
    float: left;
    width: 100px;
    padding: 10px;
}
</style>

JavaScript

$('#today_images').empty();
    $.getJSON('api/gallery/today_photo.php', function(data) {
        /* data will hold the php array as a javascript object */
        var foodImg = '';
        $.each(data, function(key, val) { 
            foodImg = '<div class="food_img"><img src="' + val.pic + '" class="img-thumbnail thumb m-r" width="100" height="100"/><span>' + "Image" + '</span></div>';
            $('#today_images').append(foodImg);
        });
    });

HTML

 <div id="PeopleJoin" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel"><font color="#53B567"><i class="fa fa-group"></i></font>&nbsp;People Join</h4>
        </div>
            <div class="modal-body">
                <span id="today_images"></span>
            </div>
      </div>
    </div>
  </div>

您可以在下面的 URL 中调整图像。

http://s18.postimg.org/6412rngpl/img.png

但是当我删除 Float 标签 时，它变成了 Listview，但所有图像都出现在弹出窗口中。你可以在下面的 URL 中找到图片

http://s9.postimg.org/zcbi6h1r3/img_1.png

因此我们将不胜感激。

Answer 1

尝试申请:

#today_images{
  overflow: hidden;
}

也尝试使用其他容器:.modal-content、.modal-body 等

并改变

<span id="today_images"></span>

到div:

<div id="today_images"></div>

---

这是一个 demo overflow: hidden; 行为。转到 JSFiddle 或单击 Show code snippet，然后在此处单击 Run code snippet。选中复选框以应用 CSS 规则。

document.getElementsByTagName('input')[0].addEventListener('click', function() {
  document.getElementById('today_images').style.overflow = this.checked ? 'hidden' : 'visible';
});

img {
  display: block;
}
.food_img {
  float: left;
  background: #ddd;
  border-radius: 7px;
  padding: 6px;
  margin: 20px;
}
#today_images {
  background: #444;
  margin: 2px;
  padding: 15px;
}

<p>It is sort of weird, but it works.</p>
<p>
  <label><input type="checkbox" />Apply <code>overflow: hidden;</code> to wrapper <code>#today_images</code>.</label>
</p>
<div id="today_images">
  <div class="food_img">
    <img src="http://lorempixel.com/100/100/?0" alt="" /> <span>Image</span>

  </div>
  <div class="food_img">
    <img src="http://lorempixel.com/100/100/?1" alt="" /> <span>Image</span>

  </div>
  <div class="food_img">
    <img src="http://lorempixel.com/100/100/?2" alt="" /> <span>Image</span>

  </div>
  <div class="food_img">
    <img src="http://lorempixel.com/100/100/?3" alt="" /> <span>Image</span>

  </div>
</div>

---

所有这些的替代方法是将 float: left; 完全替换为 display: inline-block; 和 vertical-align: top;。通过这种方式，您可以获得更加直观的结果。