0

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内の画像に対応してテキストを自動的に調整する必要があります。これを達成するために何をすべきか教えてください...

更新されたスナップショット: ここに画像の説明を入力

4

2 に答える 2

2

イメージタグに 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;

?>
于 2012-11-29T21:05:06.910 に答える
0

img の幅、高さ、境界線、および alt タグを常に設定してください。また、画像 div とテキスト div の幅を明示的に設定します。たとえば、3 つすべてを 500px に設定すると、テキストが折り返されます。

于 2012-11-29T20:45:07.797 に答える