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，头部和身体标签的空白页面。

我确定这是我需要的一个非常基本的代码，但我只是从PHP / JS开始，我不确定我在做什么-_-

如果您需要更多信息，请与我们联系！

提前感谢您的帮助！：）

乙

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文件中，您可以为常规容器和宽容器设置一个类，您还可以控制子容器的样式：

    .container {
        // default styles here
    }

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

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

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

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

1 个答案: