Question

我正在以网格视图的形式显示 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>

您可以在下方网址中细化图片。

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

但是当我删除浮动标记时，它会成为Listview，但所有图像都会进入弹出窗口。您可以在以下网址

中找到该图片

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>

以下是overflow: hidden;行为的demo。转到JSFiddle或单击 Show code snippet 然后单击 Run code snippet 。选中复选框以应用CSS规则。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

所有这一切的替代方法是使用float: left;和display: inline-block;完全替换vertical-align: top;。通过这种方式可以获得更直观的结果。

CSS Float让div内容走到了外面？

1 个答案: