0

我在一行上创建了一个 div，现在当我缩放它们时，以下 div 会在页面上向下移动。我不希望它们移动到下一个级别，而是希望 HTML 宽度应该增加并且它们应该保持在同一级别。我找到了一个 jsfiddle 用于我为我的练习创建的东西。如果您单击图像，它们会被缩放，并且经过一些缩放后，右侧图像会向下移动到下一个级别。对我来说，这不应该发生。这该怎么做？

jsFiddle 的链接是：http: //jsfiddle.net/bq6Ju/14/ 下面的代码是由堆栈溢出学者之一编写的，这是我在我的测试应用程序中有类似的东西

              .flower {
display: block;
float: left;
margin: 10px;
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid red;
}

.flower img {
width: 100%;
height: 100%;
}
.flower div {
width: 200px;
height: 200px;
position: relative;
}

.chunk2 div {
left: -100px;
}
.chunk3 div {
top: -100px;
}
.chunk4 div {
top: -100px;
left: -100px;
}

HTML代码是

Javascript/Jquery 代码是

$('div.flower').click(function(){

var resize = 1.30;

var $this = $(this);
var $inner = $this.find('div');

$this.animate({          
    'width': $this.width() * resize,
    'height': $this.width() * resize,   
});

var p = {
    top: parseInt($inner.css('top')),
    left: parseInt($inner.css('left'))
}
console.log(p);
$inner.animate({
    'width': $inner.width() * resize,
    'height': $inner.width() * resize,
    'top': p.top*resize,
    'left': p.left*resize,        
});   

});
4

3 回答 3

1

您可以在图像周围添加一个容器并防止包装并通过溢出属性添加滚动条：

.container { overflow: auto; white-space: nowrap; }

并不是为了让这个工作我已经删除了float，因为这会阻止你 AFAIK 做你想做的事。我已将display属性更改为inline-block. 我还添加了该vertical-align属性以确保图像始终顶部对齐。

.flower {
    display: inline-block;
    margin: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
    vertical-align: top;
}

你可以在这里看到演示：http: //jsfiddle.net/bq6Ju/18/

于 2012-08-24T23:59:54.837 回答
1

添加一个浮动容器nowrap也可以。

http://jsfiddle.net/bq6Ju/19/

.container {
    float: left;
    white-space: nowrap;
}
于 2012-08-25T00:23:26.913 回答
0

演示：http: //jsfiddle.net/bq6Ju/26/

HTML：

<div class="row">
<div class="row_wrapper">
  <div class="flower chunk1">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk2">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk3">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk4">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>

  <div style="clear: both;"></div>
</div>
</div>

<!-- and here more rows -->

CSS：

.row {
  overflow-x: scroll;
}

.row_wrapper {
  width: 500px; /* initial width */
}

/* other your css */

JavaScript

// in click handler

var total_width = 0;
var cur_outer = $(this).outerWidth(true) - $(this).width();
var cur_inner = resize * $(this).width();
var total_width = cur_outer + cur_inner;

$(this).parent().children('.flower').not(this).each(function () {
  total_width += $(this).outerWidth(true);
});

$(this).parent().width(total_width + 10);
于 2012-08-25T05:43:22.027 回答