Question

这是我的第一篇SO帖子，如果我的格式很糟糕，请原谅我。

我正在尝试格式化某些产品类别列表。类别按分类分组。我可以得到.preview_box div来对齐我想要的方式，我可以获取.preview_box div的内容以符合我想要的方式。我无法弄清楚如何做的是保持.classification div显示为内联和居中。我现在让它们内联的方式是在它们上面放一个左浮动，这会使它们无法居中。

当我的整体页面布局的容器宽度未知（80％，min-800px，max-1200px）时，如何将未知宽度的块内容居中在未知宽度div中？

这是我的html＆amp; amp;的CSS：

<div class="previews">
  <% @classifications.each do |classification| %>
    <div class="classification">
      <h3>
        <%= classification.title %>
      </h3>
      <% classification.subcategories.each do |subcategory| %>
        <div class="preview_box">
          <div class="subcategory_preview_image">
            <% if subcategory.image? %>
              <%= link_to image_tag(subcategory.image.url(:thumbnail)), abbr_subcategory(subcategory) %>
            <% elsif subcategory.products.present? and subcategory.products.first.product_images.present? %>
              <%= link_to image_tag(subcategory.products.first.product_images.first.image.url(:thumbnail)), abbr_subcategory(subcategory) %>
            <% else %>
              <%= link_to image_tag('subcategories/missing.png'), abbr_subcategory(subcategory) %>
            <% end %>
          </div>
          <div class="subcategory_preview_text">
            <%= link_to subcategory.title, abbr_subcategory(subcategory) %>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

.previews {
}
.classification {
  margin: 3px;
  padding: 3px;
  float: left;
  text-align: center;
}
.previews .preview_box {
  position: relative;
  width: 120px;
  height: 150px;
  float: left;
  margin: 10px;
}
.previews .preview_box .subcategory_preview_image {
  position: absolute;
  bottom: 40px;
  width: 120px;
}
.previews .preview_box .subcategory_preview_image img {
  display: block;
  margin: 0 auto;
}
.previews .preview_box .subcategory_preview_text {
  position: absolute;
  top: 110px;
  width: 120px;
  text-align: center;
}

Here's了解它目前的样子。

我要做的是将那些灰色框放在容器中，而不是每个灰色框都在自己的行上，而不知道任何灰色框的宽度或白色容器的宽度。

Answer 1

我不确定我是否理解正确但这可能对你有用。你需要根据自己的需要调整它，但它应该有效

~~http://jsfiddle.net/wxarF/~~

更新： http://jsfiddle.net/wxarF/1/

CSS：

.previews {
    width: 600px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 20px;
}

.classification div {
    display: inline-block;
    background: #eee;
    padding:3px;
    margin:0 5px 5px 0;
    border: 1px solid #ccc;
}

.preview_box {
    display: inline-block;
    background: #ccc;
    margin-right: 3px
 }

如何将未知宽度的未知数量的块元素置于未知宽度的块容器中？

1 个答案: