Question

有没有办法实现，我无法更好地描述它，＆＃34;基于步骤的高度＆＃34;在一个div？我做了一点fiddle来展示我拥有的东西。

我的目标是，每个方框的高度都是400px的倍数。因此，如果height: auto;的框为345像素，则应为400像素，如果介于400和800像素之间则应为800像素，依此类推。不幸的是，我没有找到任何有用的东西来达到这个目的。有什么想法吗？

Answer 1

这里我整理了一个样本片段，其中显示了一个非常简单的概念，即保持它们~~等于高~~，步长高度~~在400,800,1200之间。~~

<击>

~~Todo：更新脚本以动态设置元素或css而不是我的固定高度。如果你想在重新调整大小时重新计算，你还需要订阅同一个事件。~~

＆＃13;

function testHeight () {
  var scriptTag = document.scripts[document.scripts.length - 1];
  var parentTag = scriptTag.previousElementSibling;
  var childrenTags = parentTag.children;
  for (var i = 0; i < childrenTags.length; i++) {
    var childTag = childrenTags[i];
    childTag.style.height = "auto";
    childTag.style.height = (Math.ceil(parseInt(childTag.clientHeight) / 400) * 400) + "px";    
  }
}

testHeight();


(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    testHeight();
  }

}());

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow: hidden;
    box-sizing: border-box;
}

.wrapper div {
    width: 30%;
    margin-right: 5%;
    float:left;
    border: 1px solid #ebebeb;
    padding: 20px;
    box-sizing: border-box;
    height: 400px;
}

.wrapper div:last-of-type {
    margin-right: 0;
}

＆＃13;

<div class="wrapper">
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
</div>

＆＃13;

如果您希望所有方框都同样高，那么这个版本会在＆＃34;包装＆＃34;上计算高度。而不是循环每个元素。

＆＃13;

function testHeight () {
  var scriptTag = document.scripts[document.scripts.length - 1];
  var parentTag = scriptTag.previousElementSibling;
  parentTag.style.height = "auto";
  parentTag.style.height = (Math.ceil(parseInt(parentTag.clientHeight) / 400) * 400) + "px";
}

testHeight();


(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    testHeight();
  }

}());

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow: hidden;
    height: 400px;
    box-sizing: border-box;
}

.wrapper div {
    width: 30%;
    margin-right: 5%;
    float:left;
    border: 1px solid #bbb;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
}

.wrapper div:last-of-type {
    margin-right: 0;
}

＆＃13;

<div class="wrapper">
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
</div>

＆＃13;

Answer 2

这是一个使用jQuery的版本，它将每个框设置为最近的＆＃34; 400px步骤＆＃34;高度。

＆＃13;

$('div').each(resize);

function resize(){
    var height = $(this).css( "height" );
    var newHeight = Math.ceil(parseInt(height) / 400) * 400;
    $(this).css('height', newHeight+'px');
}

＆＃13;

html, body {
    margin: 0;
    padding: 0;
}

div {
    width: 30%;
    margin-right: 3%;
    float: left;
    border: 1px solid #ebebeb;
    padding: 20px;
    box-sizing: border-box;
}

div:last-child {
    margin-right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>

＆＃13;

如何根据内容将元素高度限制为特定值（＆＃34;步进＆＃34;）

2 个答案: