如果Div為空，請將其隱藏並更改另一個div的寬度

Question

我是CSS和PHP的新手，如果Div為空，我試圖找到一種方法來隱藏我的.item頁。 然后將項目頁面的寬度更改為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

您可以為空和不為空設置不同的CSS類規則。 這些規則將設置寬度和/或顯示。 空元素將為零...甚至不打印它。 然后在服務器代碼中運行確定狀態的任何測試...並將適當的校准應用於元素

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/