Question

我正在用div制作一张桌子。我使用div的原因是桌子可能没有我想要的那样响应。

无论如何我制作的这个容器应该是儿童的宽度并且居中，但是由于某种原因，尽管没有设置宽度，它仍然决定更大。关于如何解决这个问题的任何想法？

.wrapper {
  transform: translate(-50%, 0);
  margin-left: 50%;
  height: 100%;
  background-color: purple;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 150px;
  height: 150px;
  display: block;
  float: left;
  margin: 10px;
}

<body style="margin: 0; height: 100vh; width: 100vw;">
  <section class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

Answer 1

这是你的花车。如果您希望容器包含＆＃34;包含＆＃34; div，你必须＆＃34;漂浮＆＃34;或者在容器本身上使用float或使用内联块。

我建议使用display:inline-block

试试这个：

.wrapper {
  display: inline-block;
  background-color: purple;
  margin: 0px auto;
  max-width: 280px;
  padding: 0;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 120px;
  height: 120px;
  display: block;
  float: left;
  margin: 10px;
}

这将使您的容器实际包含其中的元素。此外，您需要将最大宽度添加到容器中，以确保您没有任何难以填充的填充。您可能希望使用某些媒体查询进行设置，以使其在每种尺寸下都能正确显示。

@media screen AND (max-width: 300px) {
    .wrapper {
        max-width: 280px;
    }
}

Answer 2

问题是你的.wrapper div的所有孩子都在浮动，导致父母的身高为0。您可以通过在包装容器上设置overflow:hidden来解决此问题，如果您需要它们浮动（您也可以使用display:inline-block而不是float:left并且不需要溢出属性）

.wrapper {
  transform: translate(-50%, 0);
  margin-left: 50%;
  background-color: purple;
  overflow: hidden;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 150px;
  height: 150px;
  display: block;
  float: left;
  margin: 10px;
}

<body style="margin: 0; height: 100vh; width: 100vw;">
  <section class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

Answer 3

将包装器div设置为display：inline-block;

HTML

  <section class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</body>

CSS

.wrapper {
  display: inline-block;
  background-color: purple;
}

.wrapper div {
  background-color: cornflowerblue;
  width: 120px;
  height: 120px;
  display: block;
  float: left;
  margin: 10px;
}

Codepen

Answer 4

这并没有解决您的特定代码，但您确实提到过尝试使用DIV创建表。您可以使用display: table | table-row | table-cell;。

以下是实现它的一种方法：

＆＃13;

.table {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
}
.example {
  width: 50%;
}
.example .td {
  text-align: center;
  border: 1px solid #CCC;
}

＆＃13;

<div class="table example">

  <div class="tr">
    <div class="td">
      A
    </div>
    <div class="td">
      B
    </div>
    <div class="td">
      C
    </div>
  </div>

  <div class="tr">
    <div class="td">
      D
    </div>
    <div class="td">
      E
    </div>
    <div class="td">
      F
    </div>
  </div>

</div>

＆＃13;

如果您不想将CSS类打到每个元素上，您也可以将CSS更改为以下内容：

.table {
  display: table;
}
.table > div {
  display: table-row;
}
.table > div > div {
  display: table-cell;
}

如何使父容器像孩子一样大？

4 个答案: