php - 如何在 div 中自动调整图像及其对应的文本

Question

我想在 div 部分显示图像。这是我正在使用的 CSS

    #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>

图像显示良好，但是当我添加文本($name)时，它失去了风格。请检查下面的图片

<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 内的图像相对应，不留空格。请建议我应该做些什么来实现这一目标......

更新快照：

Answer 1

在您的图像标签上应用浮动

例如：

css
{

#image
{
float: left;
}

}

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

更新： 观看更新后的屏幕截图后。我建议您可以做的是获取图像的宽度，然后将其传递给您的 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;

?>

Answer 2

始终设置您的 img 宽度、高度、边框和 alt 标签。我还将明确设置图像 div 和文本 div 的宽度。例如，如果将它们三个都设置为 500px，则文本应该换行。