草庐IT

javascript - 全高内容，宽度尽可能小

coder 2023-08-06 原文

我永远不会认为这是可能的，但这里有很多聪明人所以我想我会问。我正在寻找一种方法来拥有一个全高容器，其宽度取决于有多少内容。我希望文本在使用尽可能小的宽度的同时填充占据整个高度的区域。高度是已知的和硬编码的，内容的数量不是。

我正在使用 something like this :

<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled....</p>
</div>

div {
    background:red url(http://lorempixel.com/600/400/);
    float:left;
    width:600px;
    height:400px;
}
p {
    background:#fff;
    padding:20px;
    margin:20px;
}

通常内容从上到下填充页面:

我要找的是相反的，从左到右填写:

内容较少，应该是这样的:

使用带有 width:auto 的完整硬编码高度会产生这种效果:

有没有办法让文本以尽可能小的宽度填充高度，而不用硬编码宽度或让文本溢出？这似乎是不可能的，我不知道如何处理它。欢迎使用 Javascript/jQuery 解决方案。

最佳答案

我想到的是一个简单的 jQuery 解决方案:在 while 循环中，设置条件，以便在高度超过容器高度时运行循环。在循环中，您增加了 <p> 的宽度逐个像素，直到高度不再超过容器高度:) 

$(document).ready(function() {
    // The 400-80 is because you have to subtract the container padding and the element's own padding
    while($("div > p").height() > 400 - 80) {
        currentWidth = $("div > p").width();
        $("div > p").width(currentWidth + 1);    
    }
});

http://jsfiddle.net/teddyrised/RwczR/4/

我也对您的 CSS 进行了一些更改:

div {
    background:red url(http://lorempixel.com/600/400/);
    float:left;
    overflow: hidden;
    width:600px;
    height:400px;
    padding: 20px;
    box-sizing: border-box;
}
p {
    background:#fff;
    padding: 20px;
    width: 1px;
}

关于javascript - 全高内容，宽度尽可能小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15227350/

javascript尽可能codesectionimagejqueryhtmlcss

有关javascript - 全高内容，宽度尽可能小的更多相关文章

  1. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  2. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  3. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  4. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  5. 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

  6. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 如何在ruby中提取方括号内的内容 - 2

    我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和

  8. ruby-on-rails - 如何找出拦截 'method_missing' 的内容 - 2

    使用Ruby1.8.6/Rails2.3.2我注意到在我的任何ActiveRecord模型类上调用的任何方法都返回nil而不是NoMethodError。除了烦人之外，这还破坏了动态查找器(find_by_name、find_by_id等)，因为即使存在记录，它们也总是返回nil。不从ActiveRecord::Base派生的标准类不受影响。有没有办法追踪在ActiveRecord::Base之前拦截method_missing的是什么？更新:切换到1.8.7后，我发现(感谢@MichaelKohl)will_paginate插件首先处理method_missing。但是will_pa

  9. Ruby Regex，获取所有可能的匹配项(不截断字符串) - 2

    我遇到了ruby​​正则表达式的问题。我需要找到所有(可能重叠的)匹配项。这是问题的简化:#Simpleexample"Hey".scan(/../)=>["He"]#Actualresults#Withoverlappingmatchestheresultshouldbe=>["He"],["ey"]我尝试执行并获得所有结果的正则表达式如下所示:"aaaaaa".scan(/^(..+)\1+$/)#Thislooksformultiplesof(here)"a"biggerthanonethat"fills"theentirestring."aa"*3=>true,"aaa"*2=

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐