我怎樣才能動態地改變PHP的HTML div的寬度？

在我的網站我有常見問題網頁，其中，如果用戶只添加文本的問題，然後div的。類應該是100％的寬度如果用戶將文本和IMG用戶可以添加問題和圖像我怎樣才能動態地改變PHP的HTML div的寬度？

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

2個div應該是每個50％，彼此相鄰，我該怎麼做？

來源

2013-08-26 take that

這可以通過很多方式完成。對於其中一個，如果沒有圖像，則不需要打印圖片（專輯）div。 – JimL

你已經提到了解決方案'if .... elseif ...'所以我不明白問題在哪裏？ – HamZa

最有可能在JS中完成此操作，而不是在PHP中完成。在PHP中，你只能做一些硬編碼的樣式，這很醜陋，會干擾你的類的使用。因此，建立一個JS例程，檢查頁面加載時是否存在任何圖像，並根據需要調整div的大小。 – arkascha

我打算假設您使用的是像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>';

輸出要麼必須在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%; }

來源

2013-08-26 09:22:19 hungerstar

\謝謝你的幫助 \但我得到一個錯誤「調用成員函數獲取（）非對象」 –

我的例子使用PHP'MySQLi'。您的實施可能會有所不同。該方法是'fetch_object（）'。 – hungerstar

我在這個項目的css/html上工作，我對php的瞭解不多，所以這裏是我認爲與div動態寬度問題有關的php代碼，所以如果答案庫中沒有圖像--->比DIV寬度= 100％ - ，如果有圖像比---> DIV寬度= 50/50 –

如果我理解你的話，文本-Dy總是被填滿，而Image-Div有時候，對吧？對於這種情況，我建議，你試試這個CSS（未選中）：

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

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

這樣的形象，事業部將在右側顯示。如果它不包含圖像，那麼它將會非常小。如果它包含圖片，則不會超過FAQcontainer-Div的50％。

請注意，一些舊的瀏覽器不理解'最大寬度'。如果圖像比這個50％寬，它會佔據它並「破壞」佈局。

更可靠的解決方案是通過服務器端腳本動態生成這些DIV，只在需要時纔打印出Image-Div。該腳本還可以照顧不同的圖像大小。

來源

2013-08-26 08:46:09 Arno

有這樣做的許多方面 - 與PHP或JavaScript：

PHP

您可以應用不同類別取決於他們是否是一個圖像或沒有，然後不同的樣式。如果每個答案/圖像集都以數組形式存儲，則可以檢查是否應用了圖像，如果圖像不是空的，則回顯類。

的JavaScript

這將是我會傾向於使用的方法。使用JavaScript，檢查圖片是否屬於他們，然後適當地改變樣式。但是，確保JS禁用的瀏覽器具有適當的CSS回退（例如，對於這些用戶，圖像的文本高於該文本）。

來源

2013-08-26 08:51:01 Braders

'他們''應該''有' – hungerstar

我怎樣才能動態地改變PHP的HTML div的寬度？

回答

相關問題