我有一个采用无表设计的3列布局。
<div id="main">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>
CSS:
#left {width: 200px;float:left;display:inline;}
#content {width: 600px;float:left;display:inline;padding: 0 10px;}
#right {width: 160px;float:left;display:inline;}
我正在使用Web应用程序,并且无法更改布局。不能更改,是指不能删除带有left / content / right的div。
在某些页面上,左列和右列都是完全空白的。我希望
#content
div
扩展到600px以上。在不更改HTML的情况下有可能吗?我有什么选择?
谢谢分配!
最佳答案
我不确定使用纯CSS做到这一点,但是由于jquery在问题中被标记了,所以我认为它是公平的游戏。
以以下为例。我们在这里正在检查#left或#right div是否为空。如果是这样,我们分别增加#content div的宽度。
$(document).ready(function(){
if($('#left').height() == 0){
$('#content').width( $('#content').width() + $('#left').width());
}
if($('#right').height() == 0){
$('#content').width( $('#content').width() + $('#right').width());
}
});
此脚本可能会得到改进,因为它依赖于一个空div的高度为零的想法。我考虑过使用:empty伪选择器,但是如果div中有任何空白,这将失败。
关于asp.net - 3列布局,当第1列和第3列为空时,希望中间列扩大,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2615882/