CSS - 为什么这个div不会占用漂浮儿童的宽度？

Question

我有一个浮动图像的网格。 我想让图像在页面中居中，所以我添加了一个inner div，它在一个完美的世界里会占用浮动图像的宽度，让那个人在页面中居中。

但这是css！

不幸的是，由于某种原因，div继承了父级的整个宽度，因此无法将元素集中在内部。

以下是选择内部div的输出方式：

这是我正在使用的CSS：

.image-grid{

    padding: 20px;
}


.image-grid__inner{

    overflow: hidden;

}
.image-grid__image{
    text-align: center;  
    display: block;

    position: relative;

    -webkit-backface-visibility: hidden;

    width:  180px;
    height: 120px;

    float: left;
    margin: 10px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}


.image-grid__image img{
    display: inline-block;

    width:  180px;
    height: 120px;

    transition: width 0.3s ease, height 0.3s ease;
}

Milion感谢您的帮助。

Answer 1

如果缩略图的空间不够，它会拼写，如果你想集中基于行的缩略图，同时在调整容器大小时保持它的居中，我建议你考虑这个简单的flexbox示例：

• 从float:left;
删除/评论.image-grid__image
• 将display: flex; flex-flow: row wrap; justify-content: center;添加到.image-grid__inner

<强> External Fiddle to test resizing

以下片段：

.image-grid {
  padding: 20px;
  /* just for reference */
  border: 1px solid lightgray;
}

.image-grid__inner {
  overflow: hidden;
  /* new */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.image-grid__image {
  text-align: center;
  display: block;
  position: relative;
  -webkit-backface-visibility: hidden;
  width: 180px;
  height: 120px;
  /*float: left;*/
  margin: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}

.image-grid__image img {
  display: inline-block;
  width: 180px;
  height: 120px;
  transition: width 0.3s ease, height 0.3s ease;
}

<div class="image-grid">
  <div class="image-grid__inner">
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
    <div class="image-grid__image"></div>
  </div>
</div>

Answer 2

删除浮动并使用coordinate_a = (p,q) coordinate_b = (r,s) slope_vector(a,b) = (p-r,q-s)/distance(a,b)
将display: inline-block添加到主持牌div 并删除内部容器。

text-align: center

.image-grid {
  padding: 20px;
  overflow: hidden;
  text-align: center;
}

.image-grid__image {
  text-align: center;
  position: relative;
  -webkit-backface-visibility: hidden;
  width: 180px;
  height: 120px;
  /*float: left;*/
  display: inline-block;
  margin: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: padding 0.3s ease, transform 0.2s ease-out, box-shadow 0.5s;
}

.image-grid__image img {
  display: inline-block;
  width: 180px;
  height: 120px;
  transition: width 0.3s ease, height 0.3s ease;
}

Answer 3

您的问题有各种解决方案。

固定大小的图像/非响应式CSS样式

在这里，您可以将图像添加到元素中，该元素通常只需要像<p></p>那样获取其内容的大小。我目前可以想到的元素是<span></span>和text-align: center。 然后，您可以使这些元素的父元素具有css inline-block，这使得所有float: left元素居中对齐

响应式图像样式

如果您只想添加没有父元素的图像，可以设置图像的响应宽度而不是固定大小。通过响应我的意思是使用百分比。您不需要使用var $buttons = $('.form-group.radio_buttons'), $wrappers = $buttons.find('.radio'), $inputs = $buttons.find('input[name="address"]'); $inputs.on('change', function() { var $input = $(this), $wrapper = $input.closest('.radio'), isChecked = $input.is(':checked'); $wrappers.removeClass('ui-message ui-state-highlight'); if (isChecked) { $wrapper.addClass('ui-message ui-state-highlight'); } else { $wrapper.removeClass('ui-message ui-state-highlight'); } });样式

Flexbox的

即使我是flexbox的新手，但我确实使用它创建了产品网格。 @ Syden的回答足以解释这一点。