用列获取div的宽度答案

【问题标题】：Get width of div with columns用列获取div的宽度
【发布时间】：2012-03-27 10:35:59
【问题描述】：

我有一个简单的标记

.content{
    -webkit-column-width: 100px;
    width : 200px;
    height: 100px;
}

<div class="content">
Much text so the text will extend the box...
<div/>

当我使用 jQuerys 宽度函数时，它总是返回 200，这是错误的，或者至少不是我所期望的。

我需要用类内容测量 div 的宽度，里面有很多文本，会扩展 div。

http://jsfiddle.net/EJEsP/

【问题讨论】：

width : 200px;，那你为什么认为它错了？
看例子，内容多行，扩展div。
错误？你在期待什么？ CSS有width : 200px
它的宽度是200px但是内容溢出了div。

标签： jquery dom css javascript

【解决方案1】：

.content{
    -webkit-column-width: 100px;
    width : 200px;
    height: 100px;
}
#wrapper {
    width : auto;
}


<div id="wrapper">
    <div class="content">
    Many lines
    <div/>
<div/>

alert($("#wrapper").width())

使用 width:auto 将您的内容插入另一个 div 并使用 jQuery 获取该 div 的宽度。

【讨论】：

谢谢，正是我搜索的目的！
+1 为简单起见。我撤回我的回答，支持这个。

【解决方案2】：

你明白了，因为你的内容实际上是 200px 宽度。

【讨论】：

在 stackoverflow 示例中是的，但在小提琴演示中没有。

【解决方案3】：

去掉宽度

查看更新示例

http://jsfiddle.net/EJEsP/2/

【讨论】：

如果我删除 div 会破坏列
也许您想将 -webkit-column-width 设置为 200px？ jsfiddle.net/EJEsP/7

【解决方案4】：

您已将宽度设置为 200 像素。除非您将它们添加到另一个 div 中，否则无论该 div 中的内容是什么，都不会被视为更大。将宽度更改为自动，看看这是否符合您的预期:)

http://jsfiddle.net/EJEsP/5/

【讨论】：

是的，它解决了问题，但是如果我删除宽度，列就会被破坏。
因为它是 4 而不是 3 而被破坏？不幸的是，您必须为此创建更多代码。如果您将高度增加到 600px，您将获得 3 个列。 jsfiddle.net/EJEsP/8
是的，我知道，但高度是固定的。但是我在gabitzish answer中找到了解决方案