在Php文件的If語句中使用DIV的寬度

我有一個.php文件，其中我有一個佈局，我想根據div的寬度進行更改。該div是以下代碼的父代，並位於其他文件中。在Php文件的If語句中使用DIV的寬度

<?php if ($(".container").width() > 400) { ?> 

    <div class="sub-container"> 
     <div">sidepanel-left</div> 
     <div>content</div> 
     <div>sidepanel-right</div> 
    </div> 

<?php } else { ?> 

    <div class="sub-container"> 
     <div>sidepanel-left 
       <div>sidepanel-right</div> 
     </div> 
     <div>content</div> 
    </div> 

<?php } ?>

這給了我一個只有Html，頭部和身體標籤的空白頁面。

我敢肯定，這是我需要一個非常基本的代碼，但我只是在PHP/JS開始，我不知道的我在做什麼-_-

讓我知道如果你需要更多信息！

在此先感謝您的幫助！ :)

來源

2015-12-14 user2970517

它看起來像你在想jQuery。 PHP不知道任何DOM元素的寬度。 – showdev

您不能合併服務器端代碼和客戶端代碼。 PHP不知道任何元素的寬度，只是發送HTML來渲染。 Javascript可以檢測寬度，因爲元素已經在頁面上呈現。你不應該有這個IF語句來輸出代碼。只需發送一個版本。要麼根據寬度更新您的CSS以處理此佈局差異，要麼使用一些Javascript來完成此操作。雖然我會用CSS處理它。 – slapyo

感謝大家的意見。我讀過關於PHP不知道寬度的信息，但我認爲它只能讀取窗口的大小，而不能讀取任何元素的大小（要學習的東西太多）。我知道@media在CSS中用於調整CSS取決於窗口的寬度......但是我怎樣才能使用CSS來檢測div/class的寬度？謝謝！ – user2970517

您不能在PHP中執行此操作。你可以做的是：

從PHP端，輸出HTML代碼：

<div class="container"> 
     ... 
     <div class="sub-container"> 
      <div>sidepanel-left</div> 
      <div>content</div> 
      <div>sidepanel-right</div> 
     </div> 

    </div>

然後在你的HTML頁面上，確保jQuery是加載，並把這個：

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

     $('.container').each(function(){ 
      var $this = $(this); 
      if ($this.width() > 400) { 
       $this.addClass('wide-container'); 
      } 
     }); 
    }); 
    </script>

然後，在你的css文件中，你可以爲普通容器和寬容器設置一個類，並且你還可以控制子容器的樣式：

.container { 
     // default styles here 
    } 

    .container.wide-container { 
     // override wide container styles 
    } 

    .container.wide-container > .subcontainer { 
     // override subcontainer styles 
    }

您可以使用@media查詢來實現類似的結果，但可以根據屏幕的寬度應用@media查詢，而不是使用特定的容器。

來源

2015-12-14 20:33:51 Karolis

謝謝！我將用你的代碼管理一些東西。我不想使用@media查詢，因爲我希望更改是基於特定div的寬度而不是屏幕。再次感謝！ – user2970517

@ user2970517 +1這個答案很好。只需要注意一點：在寬度<400時，您希望將sidepanel-left和sidepanel-right放在彼此的頂部，因此您可能必須爲每個人提供他們自己的id/class，以便您可以移動它們。 –

作爲一個經驗法則，如果絕對沒有辦法擺脫純粹的CSS和/或媒體查詢，只能使用javascript。即使媒體查詢是有限的，它們也會在瀏覽器窗口調整大小等時改變它們的值。當瀏覽器調整大小時，我寫的代碼不會更新容器類。要做到這一點，您可能需要將所有內容都包裝到$（window）.on（'resize'，function（）{...}）; – Karolis

在Php文件的If語句中使用DIV的寬度

回答

相關問題