格式化内容，如网址预览

Question

I am trying to create my own url preview. Like facebook shows. Dont want to use readymade script.

Here I go:

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

But here formatting is not appropriate.

How can I show entire things in one box whic contains.

1. first title desc and it's url i.e. echo "<a href="; echo $url; echo"/>"; echo $title_display; echo "</a>"; //show url and title description

2. Below it Image on left side of box (can take div for that)

3. Preview i.e. small 100 char description on right side of image.

Exactly same way as image preview shown by facebook when URL is entered.

Answer 1

This is all ready a better written block. You dont have to use that much of echo's if you can do it with 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>';

You can set a div around it with an id (box), that way you can change the look with css.
And a div around the image and $preview.
a float:left; on the image and the <p> around $preview

Update after comment:

To edit the complete box, you can use

#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;                |  |
| |               |   |                                       |  |
| |               |   |                                       |  |
| |---------------|   |---------------------------------------|  |
|                                                                |
|----------------------------------------------------------------| 

Because the #box is 400px, the image is smaller than 100px, can the $preview be like 300px.
and because 100 + 300 = 400px (with the float:left;) it should fit next to each other.

You can create a gab between the image and text with margin-right:5px; on the image OR margin-left:5px; on the <p>

DEMO