Question

我现在可以使用下面的代码将div放到左侧。

<fieldset>
<div class="form_wrapping_columns_container">
  Test1
</div>
<div class="form_wrapping_columns_container">
  Test2
</div>
<div class="form_wrapping_columns_container">
  Test3
</div>
<div class="form_wrapping_columns_container">
  Test4
</div>
<div class="form_wrapping_columns_container">
  Test5
</div>
</fieldset>

fieldset
{
text-align:center;
display:inline-block;
margin: 0 auto;
}
.form_wrapping_columns_container{
width:200px;
float: left;
text-align:left;
margin-left: 60px;
margin-right: 60px;
padding-left:0px;
}

但我想要做的是，如果浏览器窗口缩小，我仍然希望div成为中心，即使它们必须包装。但看起来，字段集宽度将始终扩展，以便即使它们必须堆叠也能并排浮动所有字段，因此在窗口缩小时，居中不会起作用。

澄清一点。容器div需要保持一定的宽度。并允许根据浏览器宽度并排显示多个。如果他们需要叠在一起，因为窗口太小，没关系。但如果他们需要堆叠，我仍然希望他们居中。如果它们可以并排放置，那么它就会居中，但一旦叠加就不会居中。

我确信它缺少一些简单的东西，任何帮助都会受到赞赏。我在这里做了一些搜索，但从来没有看到似乎解决我问题的答案。

由于

Answer 1

这是你要找的吗？ JSFiddle

请注意，旧版浏览器不支持此功能，但如果您不关心旧浏览器，则Flex效果很好。

如果您需要稍微改动，请告诉我。请注意，我将fieldset更改为div，因为显然flex不想使用fieldset。那可以吗？

HTML：

<div id="fieldset">
    <div class="form_wrapping_columns_container">
      Test1
    </div>
    <div class="form_wrapping_columns_container">
      Test2
    </div>
    <div class="form_wrapping_columns_container">
      Test3
    </div>
    <div class="form_wrapping_columns_container">
      Test4
    </div>
    <div class="form_wrapping_columns_container">
      Test5
    </div>
</div>

CSS：

#fieldset
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.form_wrapping_columns_container
{
    margin: 0 auto;
    height: 60px;
    width: 50px;
    -webkit-flex: 0 0 50px;
    flex: 0 0 50px;
    border: 1px solid black;
}

包裹后浮动左div中心

1 个答案: