Как я могу динамически изменять php по ширине html div?

Question

на моем сайте я есть FAQ страницу, пользователи могут добавлять вопросы и изображения

<div class="FAQ container"> 
<div class="content">text text text</div> 
<div class="pic"><img></div> 
</div> 

если пользователь добавляет только текст на вопрос, то Div .class должна быть ширина 100%, если пользователь добавляет текст и IMG 2 div должны быть 50% каждый, рядом друг с другом, Как я могу это сделать?

Answer 1

Я предполагаю, что вы используете базу данных, такую ​​как MySQL. Я также собираюсь предположить, что ваш запрос к базе данных возвращает следующие поля вопрос, Ответ и _image_path_.

PHP

$faq_html = '<div class="faq %s"><div class="content">Q: %s<br>A: %s</div>%s</div>'; 
while ($row = $result->fetch_object()) : 
     $container_class = 'no-image'; 
     $faq_img_html = ''; 
     if (! empty($row->image_path)) : 
      $container_class = 'has-image'; 
      $faq_img_html = sprintf('<div class="pic"><img src="%s" /></div>', $row->image_path); 
     endif; 
     $faqs .= sprintf($faq_html, $container_class, $row->question, $row->answer, $faq_img_html); 
endwhile; 

echo '<div class="faqs-container">' . $faqs . '</div>'; 

Выходной сигнал будет либо иметь класс .no-image или .has-image на DIV обертка для каждого отдельного FAQ.

HTML

<div class="faq no-image"> 
     <div class="content"> 
      Q: text text text? <br> 
      A: text text text 
     </div> 
</div> 

<div class="faq has-image"> 
     <div class="content"> 
      Q: text text text? <br> 
      A: text text text 
     </div> 
     <div class="pic"><img src="your-img.jpg" /></div> 
</div> 

После того, как вы есть, что просто посыпать немного CSS.

.no-image .content { width: 100%; } 
.has-image .content, 
.has-image .pic { width: 50%; } 

Answer 2

Если я правильно понял, текст-Div всегда заполнен и изображение-Div только иногда, правильно? В этой ситуации я хотел бы предложить, что вы попробуете это CSS (непроверенные):

.pic{ 
max-width: 50%; 
float: right; 
} 

.FAQcontainer{ /* you can not have space in class names */ 
    clear: both; 
} 

Таким образом, изображение-Div будет отображаться на правой стороне. Если он не содержит изображения, то он будет очень маленьким. Если он кодирует изображение, он не будет более чем на 50% из FAQcontainer-Div.

Обратите внимание, что некоторые старые браузеры не понимают «max-width». И если изображение будет шире, чем 50%, это займет место и «разрушит» макет.

Более надежным решением было бы генерировать эти DIVs динамически с помощью сценария на стороне сервера, который при необходимости распечатывает Image-Div. Сценарий также может заботиться о разных размерах изображений.

Answer 3

Есть много способов сделать это - с PHP или JavaScript:

PHP

Вы можете применять различные классы в зависимости от того, что их это изображение или нет, а затем стиль их по-разному. Если каждый набор ответов/изображений хранится в виде массива, вы можете проверить, применяется ли изображение, а затем эхо-класс, если изображение не пустое.

JavaScript

Это будет метод, который я был бы склонен к использованию. С помощью JavaScript проверьте, соответствует ли изображение, а затем соответствующим образом изменяйте стили. Тем не менее, убедитесь, что существует соответствующий CSS-отступ только для браузеров с отключенным JS (например, есть изображение выше текста для этих пользователей).