在 Php 文件的 If 语句中使用 DIV 的宽度

Question

我有一个 .php 文件，我想根据 div 的宽度更改其中的布局。 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、head 和 body 标签的空白页。

我确定这是我需要的非常基本的代码，但我才刚刚开始 PHP/JS，我不确定自己在做什么 -_-

如果您需要更多信息，请告诉我！

在此先感谢您的帮助！ :)

B.

Answer 1

您不能在 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文件中你可以为普通容器和宽容器设置一个class，你还可以控制子容器的样式：

    .container {
        // default styles here
    }

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

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

您可以使用@media 查询来获得类似的结果，但@media 查询可以根据屏幕的宽度应用，而不是特定的容器。

在 Php 文件的 If 语句中使用 DIV 的宽度

Use a DIV's width in If statement in Php file

php

jquery

joomla