Question

我有2个div，它们是父div的子节点，每个div的宽度都是百分比（重要的是：我需要宽度为百分比）。但诀窍在这里，我需要将整个事情与页面的中心对齐，这似乎不可能使用margin auto技巧。请帮忙！

到目前为止，这是代码：

<div class="container" style="display: inline-block; width: 100%;">
    <div style="margin: 0px auto;">
        <div class="child1" style="width: 40%; float: left; background: lightblue;">Testing Child 1</div>
        <div class="child2" style="width: 30%; float: left; background: lightgreen">Testing Child 2</div>
    </div>
</div>

Answer 1

您正在使用浮点数，这些浮点数将从常规文档流中取出元素。我将您的.container定义为弹性框，并通过CSS将孩子集中在一起。

.container {
  display: flex;
  justify-content: center;
}

.child1 {
  width: 40%;
  background-color: lightblue;
}

.child2 {
  width: 30%;
  background-color: lightgreen;
}

<div class="container">
  <div class="child1">Testing Child 1</div>
  <div class="child2">Testing Child 2</div>
</div>

Answer 2

您可以使用 Flexbox 执行此操作：

.container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
}

<div class="container">
  <div class="child1" style="width: 40%; background: lightblue">Testing Child 1</div>
  <div class="child2" style="width: 30%; background: lightgreen">Testing Child 2</div>
</div>

Answer 3

你可以这样使用吗？

<div class="container" style="display: inline-block; width: 100%;text-align: center">
    <div style="margin: 0px auto;">
        <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!--
        --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div>
    </div>
</div>

它可能适合你：）

Answer 4

也许尝试这种方法：

＆＃13;

#box {
position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  }

＆＃13;

<div class="container" style="display: inline-block; width: 100%;text-align: center">
    <div id="box" style="margin: 0px auto; width: 100%;">
        <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!--
        --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div>
    </div>
</div>

＆＃13;

Answer 5

您可以通过以下方式在容器的左右两侧添加15％的填充：

＆＃13;

.container {
  display: inline-block;
  width: 100%;
  padding: 0 15%;
  background: red;
}
.child1 {
  float: left;
  width: 40%;
  background: lightblue;
}

.child2 {
  float: left;
  width: 30%;
  background: lightblue;
}

＆＃13;

<div class="container">
  <div class="child1">Testing Child 1</div>
  <div class="child2">Testing Child 2</div>
</div>

＆＃13;

希望这有帮助。

如何让容器占用它的孩子的总宽度？

5 个答案: