Question

我是css和php的新手，如果Div为空，我试图找到隐藏我的.item页面的方法。然后将item-page的宽度更改为100％。现在，旁边需要85px空或不。怎么能在我的php文件中做到这一点？

这是我的CSS：

item-page { 
position:relative;
  width: 100%;

}

.item-page aside {
  float:left;
  position:absolute;
  width:85px;

}
gk-article {
  font-size:14px;
  line-height:26px !important;
  margin:0 0 80px 110px;

}

这是我的php文件：

<div id="main">                                
<jdoc:include type="component" />

</div>

Answer 1

您可以为空vs而不是空设置不同的css类规则。这些规则将设置宽度和/或显示。空元素将为零......或者甚至不打印它。然后在您的服务器代码中运行确定状态的任何测试...并将适当的calsses应用于元素

Answer 2

你在这里标记了javascript / jquery，这可能是你应该使用的（不是PHP）。

（在jQuery中）你可以做这样的事情 - 使用类作为charlietfl建议：

if( $('.item-page aside').html() == '') ) { 
    $('.item-page aside').hide();
    $('.item-page').removeClass('isntempty').addClass('isempty');
} else {
    $('.item-page aside').show();
    $('.item-page').removeClass('isempty').addClass('isntempty');
}

CSS：

.isntempty {
    width: 100%;
}

.isempty {
    width: 50%; /* whatever your default width is */
}

Answer 3

在php中检查js：

<?php
...
echo "<script>if (document.getElementById('divId').innerText=='')
//or document.getElementById('divId').textContent=='' in firefox//
$('#divId').attr('style','width:100%;');
</script>";
...
?>

Answer 4

您可以使用Javascript，使用jQuery框架可以执行此操作：

<script type="text/javascript">
$( document ).ready(function() {

//Hide if empty
if( $('.item-page').is(':empty') ) {
    $('.item-page').hide();
}

//Change to width 100%
$('.item-page').css({width:'100%'});

});
</script>

在此处了解详情：

http://api.jquery.com/empty-selector/

http://learn.jquery.com/using-jquery-core/document-ready/

如果Div为空，则隐藏它并更改另一个div的宽度

4 个答案: