如何让盒子总是等宽 [英] How do i get boxes to have equal width always

问题描述

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

Here i have to boxes, it looks like this

<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>

所有的代码都太多了，但我有两个框，代码工作原理现在，但事情是，我不喜欢我如何解决这个问题，如果你打开一个盒子，你会看到在其他来自由和相同的大小，它的想法，它应该是这样的。因此页面上的所有元素总是对称的。它只是它只有工作，如果你有显示：表在身体。我试图找到另一种方法来做这个白色同样的结果，它总是努力，当你尝试获得相等的宽度一切，但方式做到CSS / JavaScript不重要

All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter

链接： JsFiddle

/ Slaktarn

/ Slaktarn

推荐答案

所有你需要做的是在你想限制的任何元素中添加一个max-width参数。 p>

All you need to do is to add a max-width parameter to whatever elements you want to limit in size.

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

这篇关于如何让盒子总是等宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！