如果文本描述旁边包含图像,如何对齐文本描述?

时间:2013-09-28 11:59:04

标签: php css string

我想在我的页面上对齐文本描述,这样如果有人放置一个长度没有空格的字符串,字符串应该在图像开始的地方打破&以下文字应该出现在下一行。 我已经上传了实际发生的图像。

enter image description here

这是我的代码::

<div class="right">
<div class="all_content"  style="float: left; height:auto; padding:30px ;color:white;font-size:30px;line-height: 40px;word-break: break-word">  
    <div class="heading" style="width:760px">
        <?php
        $id=$_GET['id'];
        $RS = Run("SELECT firstname,lastname,description,img FROM info WHERE id='$id'");
        while($ROW = GetRow($RS))
        {
            echo $ROW['firstname'];
            echo " ";
            echo $ROW['lastname'];
        ?>
    </div>
    <div class="rt">
        <?php
        $path = 'images/uploaded/'.$ROW['img'];
        if(file_exists($path) && $ROW['img'] != "")
        {  
        ?>
        <img src="images/uploaded/<?php echo $ROW['img']?>"  width="380px" align="center" border="0" />
        <?php
        }
        else
            echo '<img src="images/uploaded/placeholder.png"  width="350px" align="center" border="0" />';
        ?>          
    </div>
        <?php
            echo "</br>";
            echo $ROW['description'];
            }
        ?>
</div>

CSS ::

.right{
width:1260px;
height:1050px;
float:left;
background-color:#1e285d;
}
.heading{
width:830px;
height:100px;
float:left;
font-size: 100px;
line-height: 30px;
margin-bottom:35px;
}
.rt{
width:350px;
height:auto;
float:right;
padding-bottom: 20px;
padding-left: 20px;
font-size: 40px;
}

我不希望图像下方的字符串。它应该立即从标题下方开始。 我知道没有人会输入这样愚蠢的词,但我仍然想知道该怎么做。

3 个答案:

答案 0 :(得分:0)

您可以使用css属性word-break     http://www.w3schools.com/cssref/css3_pr_word-break.asp

答案 1 :(得分:0)

将图片放在文字内,并将样式float:right;提供给图片,将word-break:break-all;设为texr

答案 2 :(得分:0)

如果无法在描述中添加宽度,则必须在php或javascript中手动拆分字符串。

在PHP中:

echo wordwrap($description, 78, '- ');

这不会很漂亮,对于非等宽字体也不会很好用,显然78对你来说会有所不同。它还假定页面上有固定的宽度。

如果你想要更好的东西,你可以使用javascript迭代地向一个元素添加字符,直到它的宽度超过允许的最大值,然后添加一个空格。