在Php文件的If语句中使用DIV的宽度 [英] Use a DIV's width in If statement in Php file

问题描述

我有一个.php文件，其中有一个布局，我想根据div的宽度进行更改.该div是以下代码的父级，并且位于另一个文件中.

I have a .php file in which I have a layout that I would like to change depending of a div's width. That div is a parent of the following code and is situated in a other file.

<?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，头部和身体标签.

That gives me a blank page with only Html, head and body tags.

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

I'm sure it's a pretty basic code that I need, but I'm just starting in PHP/JS and I'm not sure of what I'm doing -_-

让我知道您是否需要更多信息！

Let me know if you need more information!

预先感谢您的帮助！ :)

Thanks in advance for the help! :)

B.

推荐答案

您无法在PHP中执行此操作.您可以执行以下操作:

You can not do this in PHP. What you can do is the following:

从PHP端输出以下HTML代码:

From PHP side, output this HTML code:

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

    </div>

然后在您的HTML页面中，确保已加载jquery，并放置以下内容:

Then in your HTML page, make sure jquery is loaded, and put this:

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

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

然后，在css文件中，可以为常规容器和宽容器设置一个类，还可以控制子容器的样式:

Then, in your css file you can setup a class for regular container and wide container, and you can also control the styles of subcontainers:

    .container {
        // default styles here
    }

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

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

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

You might use @media queries to achieve similar result, but @media queries can be applied according to the width of the screen, not a particular container.

这篇关于在Php文件的If语句中使用DIV的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！