Question

我正在尝试创建自己的网址预览。喜欢Facebook秀。不想使用现成的脚本。

我走了：

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

但这里的格式不合适。

如何在一个包含的框中显示整个内容。

第一个标题desc及其网址echo "<a href="; echo $url; echo"/>"; echo $title_display; echo "</a>"; //show url and title description
在它下方的图像左侧（可以为div）
预览即图像右侧的小100个字符描述。

与输入网址时facebook显示的图片预览完全相同。

Answer 1

这是一个更好的书面块。如果你可以用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>';

您可以使用div （框）在其周围设置id，这样您就可以使用 css 更改外观。
在div和image周围$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，$预览可以像300px。
因为 100 + 300 = 400px （float:left;）它应该彼此相邻。

您可以在with margin-right:5px;

上的图片或margin-left:5px;上的图片与文字<p>之间创建噱头

DEMO

格式化内容，如网址预览

1 个答案: