Chr*_*ris 11 html javascript css jquery css3
今天又一次我偶然发现了一个我总是用css布局的问题.我想在一个水平行中有5个div.比方说,他们的宽度应该是:
其中*代表"填补剩余空间".回到过去,这是我们铺设宽度表的方式.现在由于可访问性原因,html表被禁止用于布局.这只是一个例子.我正在寻找一般的解决方案.
有人知道一个生成器,一个轻量级的 JavaScript解决方案(可以是一个jQuery插件),一个教程,一本书或一个魔术师,它可以帮助我现在和永远解决这个问题吗？
尽管基于javascript的解决方案是可能的,但是非脚本解决方案将是首选.
And*_*ndy 22
你可以display:table用来创造这种效果,我做了一个快速的小提琴
这使得个人div的行为像表格单元格,而section表格,我使用了一个部分只是为了拥有更清晰的代码,一个div也可以工作.
如果窗口大小太小,您会注意到表格单元格比指定的小,这是因为表格的默认行为.要解决这个问题,只需添加一个最小宽度(与宽度相同的值)
http://jsfiddle.net/lnplnp/bFrmD/
#div1 {
width: 60px;
}
#div2 {
width: 30%;
}
#div3 {
width: 40px;
}
#div4 {
}
#div5 {
width: 100px;
}
.layout {
display:table;
}
.cell {
display: table-cell;
}?
<html>
<head>
<title>DIV LIKE TABLE</title>
</head>
<body>
<div class="layout">
<div id="div1" class="cell">1</div>
<div id="div2" class="cell">2</div>
<div id="div3" class="cell">3</div>
<div id="div4" class="cell">4</div>
<div id="div5" class="cell">5</div>
</div>
</body>
</html>
？交叉你的手指!有了最近的broswers,你现在可以做到!