css - block 增长以适应它的 child 并且水平居中

Question

希望这不是许多其他“居中 div”问题之一的重复...

我正在寻找一种将基于表格的页面布局转换为简洁 CSS 的方法。现有的设计有一个表格，在一行中有一个单元格，页面的所有其余内容都在该单元格内。该表以 margin-left 为中心和 margin-right设置为 auto .

有很多页面使用这种布局。它们中的大多数具有相同的宽度，因此当您在站点内从一个页面移动到另一个页面时，大表格容器水平地保持在同一个位置。

偶尔会有一个内容更宽的页面。表格会变大以使其子项适合，并保持正确居中(左右边缘向外移动相同的量)。

如果没有表格，我无法找到任何方法来复制此行为。我可以更改 <table><tr><td>...</td></tr></table>到 <div style="display:table">...</div>但这并不是一个正确的解决方案。说了那么久不能用表格布局，难道还是别无选择吗？

这里有一个片段可以说明我在说什么。有 2 个居中的 block ，除了其中一个具有 display:table 外，它们完全相同。 .当您按下积木下方的按钮时，它会循环显示 3 个 child 。一个太大，一个太小，一个能够恰好适合容器(容器的宽度在 child 的 min-width 和 max-width 之间)。显示大 child 的时候，table container 还是好看的，另外一个 overflow 很丑。

注意:要使解决方案有用，它不得需要手动计算边距。我正在寻找一种通用解决方案，它适用于容器内任意动态生成的内容，而不仅仅是代码段中的 3 个简单 block 。

var containers = document.querySelectorAll(".container");
for(var i = 0; i < containers.length; ++i) {
  (function() {
    var c = containers[i],
        b = c.nextElementSibling;
    b.addEventListener("click", function(ev) {
      big = c.querySelector(".bigchild");
      medium = c.querySelector(".mediumchild");
      small = c.querySelector(".smallchild");
      if(big.style.display != "block" &&
         medium.style.display != "block" &&
         small.style.display != "block") {
        big.style.display = "block";
      } else if(big.style.display == "block") {
        big.style.display = "none";
        medium.style.display = "block";
      } else if(medium.style.display == "block") {
        medium.style.display = "none";
        small.style.display = "block";
      } else {
        small.style.display = "none";
      }
    });
  })();
}

body {
  background-color: #ccc;
}
.container {
  background-color: white;
  width: 400px;
  height: 250px;
  margin-left: auto;
  margin-right: auto;
}
.bigchild {
  background-color: #9ff;
  min-width: 500px;
  max-width: 700px;
  height: 50px;
  display: none;
}
.mediumchild {
  background-color: #6f6;
  min-width: 300px;
  max-width: 500px;
  height: 50px;
  display: none;
}
.smallchild {
  background-color: #fcc;
  min-width: 100px;
  max-width: 300px;
  height: 50px;
  display: none;
}
button {
  display: block;
  margin: 10px auto 20px;
}
#container1 {
  display: table;
}

  <div class="container" id="container1">
    <div class="bigchild">big</div>
    <div class="mediumchild">medium</div>
    <div class="smallchild">small</div>
  </div>
  <button>Next</button>

  <div class="container" id="container2">
    <div class="bigchild">big</div>
    <div class="mediumchild">medium</div>
    <div class="smallchild">small</div>
  </div>
  <button>Next</button>

Answer 1

您应该设置容器的 min-width 和 min-height 而不是 width 和 height。如果您显式设置这些尺寸，则不允许容器元素增长以容纳其子元素。

display 属性也需要更改为 inline-block 以适合子项的宽度。

要保持居中，最后需要做的是将容器的父级设置为 text-align:center(这需要设置 text-align:left在容器中)。这也消除了将容器的 margin 设置为 auto 的需要。在我的代码片段中，我将此文本对齐应用于正文，但如果这会导致其余布局出现问题，您可以只使用包装 div。

var containers = document.querySelectorAll(".container");
for(var i = 0; i < containers.length; ++i) {
  (function() {
    var c = containers[i],
        b = c.nextElementSibling;
    b.addEventListener("click", function(ev) {
      big = c.querySelector(".bigchild");
      medium = c.querySelector(".mediumchild");
      small = c.querySelector(".smallchild");
      if(big.style.display != "block" &&
         medium.style.display != "block" &&
         small.style.display != "block") {
        big.style.display = "block";
      } else if(big.style.display == "block") {
        big.style.display = "none";
        medium.style.display = "block";
      } else if(medium.style.display == "block") {
        medium.style.display = "none";
        small.style.display = "block";
      } else {
        small.style.display = "none";
      }
    });
  })();
}

body {
  background-color: #ccc;
  text-align:center;
}
.container {
  background-color: white;
  min-width: 400px;
  min-height: 250px;
  display:inline-block;
  text-align:left;
}
.bigchild {
  background-color: #9ff;
  min-width: 500px;
  max-width: 700px;
  height: 50px;
  display: none;
}
.mediumchild {
  background-color: #6f6;
  min-width: 300px;
  max-width: 500px;
  height: 50px;
  display: none;
}
.smallchild {
  background-color: #fcc;
  min-width: 100px;
  max-width: 300px;
  height: 50px;
  display: none;
}
button {
  display: block;
  margin: 10px auto 20px;
}

<div class="container">
  <div class="bigchild">big</div>
  <div class="mediumchild">medium</div>
  <div class="smallchild">small</div>
</div>
<button>Next</button>