Question

我正在为我的用例改编textarea autogrow插件

更改是它应该从一开始就是单行，并且它应该为兄弟姐妹留出空间

我正在计算这样的兄弟宽度，但我必须做错事，因为你可以看到两个兄弟姐妹都不适合

var siblings = $self.siblings();
var siblingsWidth = 0;
for(var i = 0; i < siblings.length; i++) 
    siblingsWidth += $(siblings[i]).outerWidth();

然后将max-width设置为

$self.css({"max-width": $self.parent().innerWidth() - siblingsWidth });

Answer 1

发生这种情况的原因是因为span元素是display: inline元素，并且浏览器在它们周围放置空格，就像文本节点一样。这会导致这些组件消耗的空间量为宽度加上它们之间的空间量。

为了证明这一点，我删除了HTML中span元素之间的所有间距。

<div style="width: 200px; border: solid black 1px">
    <textarea></textarea><span>SibOne</span><span>SibTwo</span>
</div>

需要注意的另一个方面是原始代码不考虑textarea盒子模型的其他组件所使用的宽度量（例如，边距，边框，填充）。

// Get the amount of horizontal space used up by the textarea margin, border, and padding
var selfUnfactoredWidth = parseInt($self.css('margin-left'), 10) 
    + parseInt($self.css('margin-right'), 10) 
    + parseInt($self.css('border-left-width'), 10) 
    + parseInt($self.css('border-right-width'), 10) 
    + parseInt($self.css('padding-left'), 10) 
    + parseInt($self.css('padding-right'), 10);

$self.css({
    "max-width": $self.parent().innerWidth() - selfUnfactoredWidth - siblingsWidth
});

DEMO

或者，您可以使用box-sizing修改默认CSS box model。

textarea { 
    resize: none;
    border: solid black 1px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

执行此操作将允许您省略之前的边框和填充宽度，因为更改的框模型将处理它。

// Get the amount of horizontal space used up by the textarea margin, border, and padding
var selfUnfactoredWidth = parseInt($self.css('margin-left'), 10) 
    + parseInt($self.css('margin-right'), 10);

$self.css({
    "max-width": $self.parent().innerWidth() - selfUnfactoredWidth - siblingsWidth
});

<强> DEMO (Using box-sizing)

为兄弟姐妹腾出空间

1 个答案: