Question

在我的网站上我有常见问题解答页面，用户可以添加问题和图像

<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

如果我理解你的话，那么文本Div总是被填充而Image-Div有时候只是，对吧？对于这种情况，我建议你尝试这个CSS（未经检查）：

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

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

这样，Image-Div将显示在右侧。如果它不包含图像，那么它将非常小。如果它包含图像，它将不会超过FAQcontainer-Div的50％。

请注意，某些较旧的浏览器不了解'max-width'。如果图像宽度超过50％，它将取而代之并“破坏”布局。

更可靠的解决方案是通过服务器端脚本动态生成这些DIV，该脚本仅在需要时打印出Image-Div。该脚本还可以处理不同的图像大小。

Answer 2

有很多方法可以做到这一点 - 使用PHP或JavaScript：

<强> PHP

您可以根据它们是否是图像来应用不同的类，然后以不同的方式设置它们的样式。如果每个答案/图像集都存储为一个数组，您可以检查是否应用了图像，然后如果图像不为空则回显一个类。

<强>的JavaScript

这将是我倾向于使用的方法。使用JavaScript，检查图像是否是他们的，然后适当地更改样式。但是，请确保禁用JS的浏览器只有适当的CSS回退（例如，图像高于这些用户的文本）。

Answer 3

我假设您正在使用像MySQL这样的数据库。我还假设您的数据库查询返回以下字段 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>';

对于每个单独的常见问题解答，输出将在DIV包装器上具有.no-image或.has-image类。

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%; }

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

3 个答案: