0

我正在尝试创建自己的 url 预览。就像脸书节目一样。不想使用现成的脚本。

我来啦：

echo "<a href="; echo $url;  echo"/>"; echo $title_display; echo "</a>"; //show url and title description    
echo "</br>";
echo "<img src='"; echo $logo; echo "'height='84' width='66' >"; // shows image on the page
$content = plaintext($data); 
$Preview = trim_display(100,$content); //to Show first 100 char of the web page as preview
echo $Preview;   
echo " <a href="; echo $url;  echo " target=_blank />"; echo "See More"; echo "</a>"; // See more link to go on that page

但是这里的格式不合适。

我怎样才能在一个包含的框中显示全部内容。

  1. 第一个标题 desc 和它的 url 即echo "<a href="; echo $url; echo"/>"; echo $title_display; echo "</a>"; //show url and title description

  2. 在它下方 框左侧的图像（可以为此使用 div）

  3. 预览，即图像右侧的小 100 字符描述。

与输入 URL 时 facebook 显示的图像预览完全相同。

4

1 回答 1

2

这一切都准备好了一个更好的书面块。如果你可以用 1 来做，你就不必使用那么多的回声。

echo '<div id="box">
   <a href="'.$url.'">'.$title_display.'</a>'; //show url and title description    
   echo'<br />
   <div>
      <img src="'.$logo.'" height="84" width="66" style="float:left;">'; // shows image on the page
      $content = plaintext($data); 
      $Preview = trim_display(100,$content); //to Show first 100 char of the web page as preview
      echo '<p style="float:left;">'.$Preview.'</p>';   
   echo '</div>
   <a href="'.$url.'" target="_blank" />See More</a>'; // See more link to go on that page 
echo '</div>';

你可以用(box)div在它周围设置 a ，这样你就可以用css改变外观。 和周围的和。 a on the and aroundid
divimage$preview
float:left;image<p>$preview

评论后更新：

要编辑完整的框，您可以使用

#box{ height: .. ; width: .. ; }   /*For the height and width of the complete box */
/* float:left; in the css file is better than inline code like in the example */
#box img { float:left;}  /* for the image */
#box p { float:left; width:300px;}   /* for the p tag */

|--------------------------#box (400px)--------------------------| 
|                                                                |
| |---------------|   |---------------------------------------|  |
| |               |   |                                       |  |
| |     IMG       |   |           <p>                         |  |
| |               |   |           float:left;                 |  |
| |  float:left   |   |           width:300px;                |  |
| |               |   |                                       |  |
| |               |   |                                       |  |
| |---------------|   |---------------------------------------|  |
|                                                                |
|----------------------------------------------------------------|

因为#box是400px，图片小于100px，$preview可以像300px一样吗？
并且因为100 + 300 = 400px（带有float:left;）它应该彼此相邻。

with margin-right:5px;您可以在图像或图像margin-left:5px;上的图像和文本之间创建一个间隙<p>

演示

于 2013-10-29T18:43:13.797 回答