Question

增加子元素宽度，使其超出父级大小。子元素只增加右侧而不是左侧，以便我将float属性赋给子元素。如何限制子元素宽度超出父元素。

这有什么CSS技巧吗？

这是我的代码。

HTML：

<div id="tdScreen" style="width: 500px; height: 300px;position:relative;border:3px solid black" class="ui-selectable ui-droppable"><textarea id="input1" rows="1" style="float: left; resize: horizontal; position: absolute; overflow: hidden; cursor: pointer; width: 100px; top: 100px; left: 300px;"></textarea></div>

JQUERY：

$('#incresewidth').on({
   keyup: function (e) {
        if (e.keyCode == 13) {                
           $("#input1").css("width",$('#incresewidth').val());
        }
    }

}）;

jsfiddle:

Answer 1

只需添加对值的简单检查，以确保它不大于元素。

var amount = $('#incresewidth').val() > 190 ? 190 : $('#incresewidth').val();

https://jsfiddle.net/Panomosh/kwbr35uw/1/

显然这并不理想，因为我手动指定了宽度的最大值，并且您希望它是动态的。但是你明白了。

Answer 2

这有什么CSS技巧吗？

是，如果带有元素和容器位置的容器是静态的，或者您在示例中保留条件...
那么，您正在寻找的规则是max-width

/*
  if:
    container width: 500px
    container border: 3px
    textarea position left: 300px

  then:
    500 - 3 - 300 = 197
*/

#input1 {
    max-width: 197px
}

请参阅更新的小提琴： https://jsfiddle.net/kwbr35uw/2/

现在..
如果尺寸，位置或其他属性是动态的，那么最好使用javascript/jQuery解决方案。
就像@joshStevenson ^{提出的那样（当然还有动态测量）}

Incresing Child元素宽度超出父元素

2 个答案: