У меня есть .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.
Вы не можете сделать это на 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 можно применять в соответствии с шириной экрана, а не конкретным контейнером.