如何在div中自動調整圖像及其相應文本

我想在div部分中顯示圖像。下面是我使用如何在div中自動調整圖像及其相應文本

#imagesection {margin:10px 10px 10px 10px; float:left; border: 5px solid #f0f0f0;} 
    #container {width:90%; margin:3% 0px 0px 10%;} 
    #full_page {height:auto; width:auto;} 
    #name {background-color:#FFF; word-wrap:break-word; word-break:} 
    </style>

正在顯示良好的圖像的CSS但是當我添加文本（$名）它失去的風格。請檢查下面 enter image description here

<div id="full_page"> 
     <div id="container"> 
      <div id="Gallery"> 
       <div id="imagesection"> 
        <img src = <?php echo $picture;?> /> 
            <div id="name"> 
        <?php echo $name; ?> 
       </div> 
       </div> 


      </div> 

     </div> 
</div>

我希望在新的生產線將繼續文本如果超出圖像的長度的圖像。我的意思是應該自動調整文本內容與div內的圖像的對應關係，不要留下空白。請建議我應該做些什麼來實現這個...

更新的快照： enter image description here

來源

2012-11-29 Ramaraju.d

設置'寬度'和'高度'屬性（' />'）... –

我希望這不僅僅是針對Windows 8的垃圾郵件廣告:-) – 2012-11-29 20:40:37

請不要介意，我試圖從JSON數據中獲取facebook api並在html上顯示。就像一個圖片庫與我的帖子。所以我只是向你展示了一個示例圖像，我無法編碼CSS。 @Dagon –

您的圖像標籤

應用浮法例如：

css 
{ 

#image 
{ 
float: left; 
} 

} 

<img id="image" src = <?php echo $picture;?> />

更新： 看你更新後的截圖。我sugggest你能做的就是讓圖像的寬度，然後傳遞到您的div會自動停止文本溢出DIV

這裏是獲得高度和寬度的代碼

<?php 

list($width, $height, $type, $attr) = getimagesize("image_name.jpg"); 

echo "Image width " .$width; 
echo "<BR>"; 
echo "Image height " .$height; 
echo "<BR>"; 
echo "Image type " .$type; 
echo "<BR>"; 
echo "Attribute " .$attr; 

?>

來源

2012-11-29 21:05:06

謝謝@soft基因但請檢查我已經複製到我已經添加的問題的CSS代碼#imagesection {margin：10px 10px 10px 10px;向左飄浮; border：5px solid＃f0f0f0;} –

@Ramarajudantuluri好心看看我的更新回答 –

我有這個想法。但力度嘗試。最後你給出了最好的答案。感謝您的善意支持 –

始終設置你的IMG寬度，高度，邊框和alt標籤。我也會明確地設置圖像div和文本div的寬度。例如，如果您將其中的三個設置爲500px，則文本應該換行。

來源

2012-11-29 20:45:07 Revent

如果圖片超過500像素，該怎麼辦？或者如果它只是一個縮略圖等（微小的圖像）？ –

如何在div中自動調整圖像及其相應文本

回答

相關問題