php - 如何使用 php 动态更改 html div 的宽度？

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

如果我理解正确的话，text-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%。

请注意，一些较旧的浏览器不理解“最大宽度”。如果图像比这 50% 宽，它将取代它并“破坏”布局。

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

Answer 2

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

PHP

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

JavaScript

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

Answer 3

我将假设您使用的是 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或一个 DIV 包装器。.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%; }