我有一个采用无表设计的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/

10-09 18:20
查看更多