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

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

 400) { ?><div class="子容器"><div">sidepanel-left</div><div>内容</div><div>sidepanel-right</div>
<?php } else { ?><div class="子容器"><div>侧板-左<div>sidepanel-right</div>
<div>内容</div>
<?php } ?>

这给了我一个只有 Html、head 和 body 标签的空白页面.

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

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

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

B.

解决方案

您不能在 PHP 中执行此操作.您可以执行以下操作:

从 PHP 端，输出这个 HTML 代码:

 
...<div class="子容器"><div>sidepanel-left</div><div>内容</div><div>sidepanel-right</div>

然后在您的 HTML 页面中，确保加载了 jquery，并输入:

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

 .container {//这里的默认样式}.container.wide-container {//覆盖宽容器样式}.container.wide-container >.子容器{//覆盖子容器样式}

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

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 } ?>

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

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.

解决方案

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

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>

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>

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
    }

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.