草庐IT

javascript - 确定动态 CSS3 多列 DIV 宽度的宽度 fixed column-width

coder 2023-08-04 原文

我有一个充满动态文本的 DIV 容器。文本的长度可以不同。 DIV 容器具有固定高度但没有宽度。

文本被格式化为 CSS3 多列文本宽度固定 columns-width。

结果是 n 列，宽度为 column-width。 现在我想知道有多少列，或者 DIV 的计算 width 是怎样的。

CSS 代码:

.columnize{
    float: left;
    position: relative;
    width: 840px;
    overflow: hidden;
}
.columnize div{
    -moz-column-width: 259px;
    -webkit-column-width: 259px;
    -moz-column-gap: 16px;
    -webkit-column-gap: 16px;
    height: 560px;
}

HTML 代码:

<div id="columnWrapper class="columnize">
    <div id="content">
    ... content goes here ...
    </div>
</div>

我试着像这样用 JQuery 获取宽度:

$('#content').width();
$('#content').innerWidth();

两者都返回 column-width，而不是除 Firefox 之外的所有浏览器中的真实 width。

关于如何获取列布局的宽度有什么想法吗？

最佳答案

我在尝试使用 css3 列作为页面对文章进行水平分页时遇到了同样的问题。这是我作为 jQuery 插件的解决方案:

http://jsfiddle.net/rkarbowski/Sfyyy/

思路是这样的:你插入一个空白 <span>在您的专栏内容末尾标记并使用 .position()捕获它的left相对于父容器的位置，并添加一个 -webkit-column-width (因为 .position() 只告诉您到 left 的 <span> 坐标的距离)。

这里有一个我不明白的小怪癖。要获得正确的宽度，您还必须减去一个 -webkit-column-gap。 .在我看来，.position().left之间的距离并且容器的边缘应该只是最后一列的宽度，-webkit-column-width .谁能解释一下这个？我只是数学不好吗？

如果插件代码草率，请见谅；我对 jQuery 的经验有限:)

(归功于它应得的地方:改编自 How to Get CSS3 Multi-Column Count in Javascript 的想法。)

关于javascript - 确定动态 CSS3 多列 DIV 宽度的宽度 fixed column-width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8354786/

多列column-widthcodecolumnwidthjavascriptjqueryhtmlcssmultiple-columns

有关javascript - 确定动态 CSS3 多列 DIV 宽度的宽度 fixed column-width的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby - 即时确定方法的可见性 - 2

    我正在编写一个方法，它将在一个类中定义一个实例方法；类似于attr_accessor:classFoocustom_method(:foo)end我通过将custom_method函数添加到Module模块并使用define_method定义方法来实现它，效果很好。但我无法弄清楚如何考虑类(class)的可见性属性。例如，在下面的类中classFoocustom_method(:foo)privatecustom_method(:bar)end第一个生成的方法(foo)必须是公共(public)的，第二个(bar)必须是私有(private)的。我怎么做？或者，如何找到调用我的cust

  3. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  4. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  5. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  6. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  7. ruby - 确定 ruby​​ 脚本是否已经在运行 - 2

    有没有一种简单的方法可以判断ruby​​脚本是否已经在运行，然后适本地处理它？例如:我有一个名为really_long_script.rb的脚本。我让它每5分钟运行一次。当它运行时，我想看看之前运行的是否还在运行，然后停止第二个脚本的执行。有什么想法吗？ 最佳答案 ps是一种非常糟糕的方法，并且可能会出现竞争条件。传统的Unix/Linux方法是将PID写入文件(通常在/var/run中)并在启动时检查该文件是否存在。例如pid文件位于/var/run/myscript.pid然后你会在运行程序之前检查它是否存在。有一些技巧可以避免

  8. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby - 确定字符串的结尾是否与单独的字符串的开头重叠 - 2

    我想查找字符串的结尾是否与单独字符串的开头重叠。例如，如果我有这两个字符串:string_1='Peoplesaynothingisimpossible,butI'string_2='butIdonothingeveryday.'如何找到string_1末尾的“butI”部分与string_2开头相同？我可以编写一个方法来遍历这两个字符串，但我希望得到一个包含我错过的Ruby字符串方法或Ruby习惯用法的答案。 最佳答案 将MARKER设置为一些从未出现在您的string_1和string_2中的字符串。有一些方法可以动态地做到这一

随机推荐