Question

我在设置div的高度时遇到困难。有多个div与css float:left。当我click特定div时它的高度应该增加。但是因为它的高度是增加所有其他div的位置也在改变。我不希望他们改变他们的位置。我想要的是target div下面的div应该向下移动而不影响其他div。＆＃39;第

Fiddle

这是代码。

＆＃13;

$("div").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

＆＃13;

div {
  height: 100px;
  width: 100px;
  border: 2px solid;
  float: left;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  HELLO WORLD 1
</div>
<div>
  HELLO WORLD 2
</div>
<div>
  HELLO WORLD 3
</div>
<div>
  HELLO WORLD 4
</div>
<div>
  HELLO WORLD 5
</div>
<div>
  HELLO WORLD 6
</div>
<div>
  HELLO WORLD 7
</div>
<div>
  HELLO WORLD 8
</div>
<div>
  HELLO WORLD 9
</div>
<div>
  HELLO WORLD 10
</div>

＆＃13;

Answer 1

您需要清除每一行的浮动。我建议将其从float: left;更改为display: inline-block;，并且不要忘记添加vertical-align: top;。

div {
  width: 100px;
  height: 100px;
  border: 2px solid;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}

<强> jsFiddle

Answer 2

这是一个使用列的解决方案。您可以调整窗口大小并重新填充列：

var $boxes;

$(document).ready(function () {
  $boxes = $(".box");
	setupColumns();
  $(window).on("resize", setupColumns);
});

function setupColumns() {
	var $columnwrapper = $("#columns");
  var w = $("<div>").addClass("column").width();
  var cnt = Math.floor($columnwrapper.width() / w);
  var cols = [];
  for (var i = 0; i < cnt; i++) {
  	var $col = $("<div>").addClass("column");
    cols.push($col);
  }
  $columnwrapper.append(cols);
  var cnt = 0;
  $boxes.each(function () {
  	$(this).detach().appendTo(cols[cnt]);
    cnt = (cnt + 1) % cols.length;
  });
}

$(".box").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

.column {
  width: 114px;
  float: left
}
.box {
  height: 100px;
  width: 100px;
  border: 2px solid;
  margin-bottom: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="columns"></div>
<div class="box">
  HELLO WORLD 1
</div>
<div class="box">
  HELLO WORLD 2
</div>
<div class="box">
  HELLO WORLD 3
</div>
<div class="box">
  HELLO WORLD 4
</div>
<div class="box">
  HELLO WORLD 5
</div>
<div class="box">
  HELLO WORLD 6
</div>
<div class="box">
  HELLO WORLD 7
</div>
<div class="box">
  HELLO WORLD 8
</div>
<div class="box">
  HELLO WORLD 9
</div>
<div class="box">
  HELLO WORLD 10
</div>

Answer 3

你也应该改变你的状况：

if ($(this).height() != 100)

这样的事情：

if ($(this).hasClass( "div-100" ))

仅仅因为在某些情况下$(this).height() <> 100。例如，对于Chrome 56.0.2924.87（x64）和Windows中显示的DPI缩放级别125％：

缩放级别90％ - $(this).height() = 99.99999725097656
缩放级别100％ - $(this).height() = 100.00000457763672
缩放级别110％ - $(this).height() = 99.99999576416016

切换内联Div JQuery的高度

3 个答案: