how can i change dynamically with php the width of a html div? -
in website have faq page users can add questions , images
<div class="faq container"> <div class="content">text text text</div> <div class="pic"><img></div> </div>
if user adds text question div .class should 100% width if user adds text , img 2 divs should 50% each, next each other, how can it?
i'm going assume using database mysql. i'm going assume your database query returns following fields question, answer , _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 either have class of .no-image
or .has-image
on div wrapper 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 have sprinkle in little css.
.no-image .content { width: 100%; } .has-image .content, .has-image .pic { width: 50%; }
Comments
Post a Comment