Question

我在容器div中有多个较小的固定大小的div。我希望它们的间距相等，以便整个块给人以中心对齐的印象。

Right now they are aligned to the left（这就是浮动的工作原理，我知道）。我明白这是不可能的，但只是想要一些黑客，这样我才能实现同样的目标。

One way to do that是计算必要的宽度（假设我需要每行3个div，每个100px宽，10px边距。所以容器的总宽度应该是100 * 3 + 60）并将宽度应用于container div和set margin auto。

#container {
    width: 360px;
    margin: 0px auto;
}
.items { /* these are smaller divs */
    width: 100px;
    margin: 10px;
    float: left;
}

但是除非我专门为不同的媒体设置宽度，否则不会因屏幕尺寸不同而看起来不错。

Another way is to use the flex display

#container {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
.items { /* these are smaller divs */
    flex: 0 0 auto;
    width: 100px;
    margin: 10px;
}

这几乎符合我的目的，但问题是当你在底行有多个div时，它只是将第二个div放在最右边，而不是在第二列下对齐（这也是我知道的预期行为，没有任何问题。）

那么，我想要实现的目标是什么技巧/黑客？

更新（响应重复报告）： 另一个问题的解决方案（报告与此问题相同）使用固定的容器宽度，而我在上面提到过，我不想修复容器宽度。所以解决方案不是我要找的那个。

下面的Josh提到了完美运行的解决方案，只更改了对齐内容：space-around，以便即使窗口缩小，内容也会保持居中。

Answer 1

那么，我想要实现的目标是什么技巧/黑客？

这绝对是一个黑客攻击，但似乎有效。您可以添加一些height 0的空Flexbox项目作为占位符。这样，flexbox项目放置将按预期计算，因为将考虑空的flexbox项目的宽度并填充空间。

空Flexbox项目的最小数量应等于一行中的最大Flexbox项目数减一。当然，你可以随时添加更多...以防万一。

在下面的示例中，我使用:empty pseudo class选择空的占位符Flexbox项目。

Updated Example

相关的CSS：

.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 0 10px 0;
}

完整的HTML / CSS：

#container {
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 25px auto;
}
.items {
  flex: 0 0 auto;
  width: 100px;
  margin: 10px;
}
#item1 {
  background-color: #F00;
}
#item2 {
  background-color: #0F0;
}
#item3 {
  background-color: #00F;
}
#item4 {
  background-color: #ABC;
}
#item5 {
  background-color: #A00;
}
#item6 {
  background-color: #6AF;
}
#item7 {
  background-color: #07A;
}
#item8 {
  background-color: #A79;
}
#item9 {
  background-color: #AF4;
}
#item10 {
  background-color: #FF4;
}
.items:empty {
  visibility: hidden;
  height: 0;
  width: 100px;
  margin: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

<div id="container">
    <div id="item1" class="items">a</div>
    <div id="item2" class="items">b</div>
    <div id="item3" class="items">c</div>
    <div id="item4" class="items">c</div>
    <div id="item5" class="items">c</div>
    <div id="item6" class="items">c</div>
    <div id="item7" class="items">c</div>
    <div id="item8" class="items">c</div>
    <div id="item9" class="items">c</div>
    <div id="item10" class="items">c</div>
    <div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div><div class="items"></div>
</div>

Answer 2

将像这样的div集中在一个像这样的容器中。所以我添加了一个$config = array( 'host' => 'localhost', 'username' => 'myusername', 'password' => 'mypassword', 'dbname' => 'mydatabase' ); $db = new PDO('mysql:host=' . $config['host'] . ';dbname=' . $config['dbname'], $config['username'], $config['password']); $db -> exec("set names utf8"); $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);，其最大宽度为class holder，因此它位于容器内部。 Fiddle

所以项目必须

Answer 3

我希望你能使用Private Sub beginner_Click() levelInput= "beginner" Levels.Hide end sub。

您可以设置：

JQuery

加载并调整页面大小后，您可以执行计算和设置边距的函数

#container {
    width: 100%;
}

.items {
    float: left;
    width: 100px;
    margin: 10px 0px;
}

将容器中的div居中

3 个答案: