我怎么能用PHP动态改变html div的宽度？ [关闭]

Question

in my website i have FAQ page which the users can add questions and images

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

if the user adds only text to the question then div .class should be 100% width if the user adds text and img the 2 divs should be 50% each, next to each other, how can i do it?

Answer 1

I'm going to assume you are using a database like MySQL. I'm also going to assume that your your database query returns the following fields question, answer and _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>';

The output would either have a class of .no-image or .has-image on a DIV wrapper for each individual 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>

Once you have that just sprinkle in a little CSS.

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