如何在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

在您的图片代码上应用Float

例如：

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，则文本应该换行。