个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我需要的非常简单，或者至少应该是这样，但经过几天的研究，我开始求助于 stackoverflow 上询问是否有人真的知道如何做到这一点......
我有 3 列内容，所有内容都包含可扩展内容。内容都不是很广泛，但很丰富(一旦展开)。我需要这样做，以便当您扩展一列中的内容时，它会将其他两列缩小到一定数量，并且当您扩展两列的内容时，它会变平等等。然后，列必须有一个百分比最大大小和最小大小(百分比或静态)，这样当列扩展时它们不会完全挤压其他列，这样我就可以为每列设置最大“可扩展性”。为简单起见，这里有一个示例，如果它有效，会完成此操作:
<table width="100%"><tr>
<td style="min-width:200px; max-width:60%;">Col1ExpandableContent</td>
<td style="min-width:200px; max-width:50%;">Col2ExpandableContent</td>
<td style="min-width:200px; max-width:40%;">Col3ExpandableContent</td>
</tr></table>
上面的代码当然是行不通的，但我相信你可以想象如果它行得通会怎样。这正是我所需要的，只是出于某种原因，最大宽度不适用于 TD 上的百分比。如果您需要更好的可视化效果，我做了一个 fiddle 来帮助说明这里的问题:http://jsfiddle.net/m5xgcf3s/
由于内容的性质，我不能只使用列的最小宽度，它们都需要可扩展，但只能扩展一定数量。我对任何解决方案和任何方式都持开放态度，它不需要是一个表格(只是默认情况下表格中的 TD 宽度和对齐方式是完美的，如果它支持最大宽度百分比)或任何东西，只要它满足要求并且不使用框架(希望无论如何都不需要)。如果它根本不使用 javascript，那么奖励，但是如果你找到一个允许平滑的动画大小过渡同时仍然满足要求的解决方案，那么你将获得巨大的奖励。如果你能向我解释为什么 max-width percentage 对 table cells 不起作用，还有奖金......
感谢大家的帮助，但我自己编写了一个脚本来解决它...没有框架，没有 jQuery，没有 hack，只需给 TDs 一个 id 并输入这段代码；
<script type="text/javascript">
window.onresize=function setTDmaxwidth() {
var containerwidth = window.innerWidth;
if (containerwidth >= 400 ) {
document.getElementById("col1").style.maxWidth=( ( containerwidth * 0.6 )+'px');
document.getElementById("col2").style.maxWidth=( ( containerwidth * 0.5 )+'px');
document.getElementById("col3").style.maxWidth=( ( containerwidth * 0.4 )+'px');
} else { }
}
</script>
它通过每次容器大小变化时计算容器宽度的分数来模拟最大宽度百分比(在这种情况下，容器是 iframe 宽度的 100%)。我会留下未回答的问题，但万一有人提出另一个答案(有或没有表格)，希望是允许宽度过渡动画的答案，或者关于为什么最大宽度百分比对 TDs 不起作用的有效解释
最佳答案
你能试试吗？
我只保留了一个 tr td 的例子。
您必须为这种情况执行每个功能。
试试吧，你会有一些想法..
CSS
<style type="text/css">
td { border: 1px solid black; }
</style>
脚本
<script>
function onLoadFunction(){
if(($(".tdFirst div").text().length)<100){
$(".tdFirst div").css('width','200px'); // min width
} else if(($(".tdFirst div").text().length)>=400) {
$(".tdFirst div").css('width','400px'); //max width
} else {
$(".tdFirst div").css('width',$(".tdFirst div").text().length+'px'); //width auto adjust
}
}
</script>
HTML
<body onLoad="onLoadFunction()">
<table>
<tr>
<td align="center"class="tdFirst">
<div>
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
<td><p>testing...</p></td>
</tr>
</table>
</body>
尝试#2
脚本在你的 fiddle 中使用 jQuery
$('document').ready(function(){
$(".tdFirst div").each(function(){
if(($.trim($(this).text()).length)<50){
$(this).css('width','20px'); // min width
} else if(($.trim($(this).text()).length)>=60) {
$(this).css('width','60px'); //max width
} else {
$(this).css('width',$.trim($(this).text()).length+'px'); //width auto adjust
}
});
});
关于html - 具有最大宽度百分比的响应列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25718905/
24
4
0
我正在尝试检查 Entry 中是否存在重复项，并使用内联消息提醒用户该数字存在。 $(document).ready(function(){ $("#con1").blur(function(
我有一个基于类的 View 。我在引导模式上使用 Ajax。为了避免页面刷新，我想使用此类基于 View 返回 JSON 响应而不是 HTTP 响应，但我只看到了如何为基于函数的 View 返回 JS
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我有一个大型内部企业基于 Web 的应用程序在 IIS6 上运行 ASP.NET 3.5，生成 401 个“未经授权”响应，然后是 200 个“Ok”响应(如 Fiddler 所述)。我知道为什么会发
感谢您研究我的问题。 我有一个node/express服务器，配置了一个server.js文件，它调用urls.js，而urls.js又调用 Controller 来处理http请求，所有这些都配置相
当我使用以下命令时，我得到正确的 JSON 响应: $ curl --data "regno=&dob=&mobile=" https://vitacademics-rel.herokuapp.co
我有一个非常简单的 RESTful 服务，它通过 POST 接收一些表单数据，其目的是在云存储(Amazon S3、Azure Blob 存储等)中简单地保留文本主体(具有唯一 ID)作为一个文件..
UDP 不发送任何 ack，但它会发送任何响应吗？ 我已经设置了客户端服务器UDP程序。如果我让客户端向不存在的服务器发送数据，那么客户端会收到任何响应吗？ 我的假设是； 客户端 --> 广播服务器地
我有一个电梯项目，其中 有一个扩展 RestHelper 的类，看起来像这样 serve{ "api" / "mystuff" prefix { case a
我们正在寻求覆盖 Kong 错误响应结构并编写自定义消息(即用我们的自定义消息替换“超出 API 速率限制”、“无效的身份验证凭据”等)。 我们要找的错误响应结构(代码是自定义的内部错误代码，与HTT
我正在尝试监听 EKEventStoreChangedNotification 以检查当我的应用程序处于后台时日历是否已更改。 我在 View Controller 的 initWithNibMeth
我了解 javascript，并且正在学习 ASP.NET C# 我想要做什么(完成的是javascript): document.getElementById('divID-1'
是否可以过滤所有 har 对象并仅获取 POST 请求/响应？也许在初始化 BrowserMobProxyServer 期间是这样做的方法？我需要将 har 对象保存到文件中并上传到 har 查看器。
我正在尝试向 Oauth 的 API 发送响应。遗憾的是，Symfony2 文档在解释 $response->headers->set(...); 的所有不同部分方面做得很差。 这是我的 OauthC
我正在尝试测试用例来模拟 api 调用，并使用 python 响应来模拟 api 调用。 下面是我的模拟， with responses.RequestsMock() as rsps: url
在尝试在 Haskell 中进行一些领域驱动设计时，我发现自己遇到了这个问题: data FetchAccessories = FetchAccessories data AccessoriesRes
我正在与 ANT+ USB 棒连接，并用项目 react 器替换我自己天真的“MessageBus”，因为它看起来非常合适。 USB接口(interface)本质上是异步的(单独的输入/输出管道)，我
我正在将项目迁移到AFNetworking 2.0。使用AFNetworking 1.0时，我编写了代码来记录控制台中的每个请求/响应。这是代码: -(AFHTTPRequestOperation *
我有以下代码段。 ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){
我有问题......我在 php 中有一个监听器脚本可以执行以下操作: if ($count != 1) {echo 'no';} else { echo "yes";} 因此它会回显"is"或“
我是一名优秀的程序员,十分优秀！