javascript - 我如何让盒子始终具有相同的宽度

Question

这里我有盒子，它看起来像这样

<div class="dataViewBox">
  <div class="dataViewBox-Download">
    <div class="dataViewBox-DownloadLink">
      <span class="dataViewBox-Hashes"></span>
    </div>

    <div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>

    <div class="dataViewBox-Name">SomeName</div>
  </div>

  <div id="testblock0" class="dataViewBox-BottomBorder">
    <div id="test0" class="dataViewBox-Data toggleable Text">
        <span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
    </div>
  </div>
</div>


<div class="infoViewExpirein">
  <div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>

<div class="dataViewBox">
  <div class="dataViewBox-Download">
    <div class="dataViewBox-DownloadLink">
      <span class="dataViewBox-Hashes"></span>
    </div>

    <div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>

    <div class="dataViewBox-Name">SomeName</div>
  </div>

  <div id="testblock1" class="dataViewBox-BottomBorder">
    <div id="test1" class="dataViewBox-Data toggleable Text">
        <span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
    </div>
  </div>
</div>


<div class="infoViewExpirein">
  <div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>

所有的代码都太多了，无法在这里发布，但我有两个盒子，代码现在可以正常工作，但问题是我不喜欢我解决这个问题的方式，如果你打开一个盒子，你'会看到另一个免费提供且大小相同，这是应该如此的想法。所以页面上的所有元素总是对称的。它只是只有当你在 body 中有“显示:表格”时它才有效。我试图找到另一种方法来实现同样的结果，当你试图在所有东西上获得相等的宽度时它总是很难，但是实现它的 CSS/JavaScript 并不重要

链接:JsFiddle

/斯拉克塔恩

Answer 1

您需要做的就是向您想要限制大小的任何元素添加一个 max-width 参数。

body {
   ...
   display: block;
   max-width: 450px;
}