Question

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

我走了：小提琴：http://jsfiddle.net/karimkhan/8wLMx/2/

  <div id="box" >

   <a href="" style="float:left; width: 300px; margin:0; margin-left:5px;" >some kind of title</a> <!--show url and title description-->
    <br/>
    <span> www.fbpreview.com <span>
        <br/>    
   <br />
   <div>
        <img src="'.$logo.'" height="84" width="66" style="float:left;"> <!--shows image on the page-->
        <p style="float:left; width: 300px; margin:0;">A lot of preview text A lot of preview textA lot of preview textA lot of preview textA lot of preview textA lot of preview textA lot of preview textA lot of preview text</p> 
            <div style="clear:both"></div>
   </div>
   <a href="" target="_blank" style="float:left; width: 300px; margin:0; margin-left:5px;" >See More</a> <!--See more link to go on that page--> 
</div>

这里的问题是

1. Entire text is not getting floated on right side of image
2. Link should not be blue colored and underline
3. Box should be single clickable

与输入网址时facebook显示的图像预览完全相同。我代替文本区域有文本框。

我想在文本框中输入网址时显示相同内容。

数据将来自表格。即网址，预览，图片网址，desc等

Answer 1

你去了：

http://jsfiddle.net/SykVM/

HTML：

<a class="fragment" href="google.com">
<img src ="http://placehold.it/116x116" alt="some description"/> 
<h3>quite the title we got here</h3>
<p class="text">
    this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc 
</p>
</a>

CSS：

.fragment {
  font-size: 12px;
  font-family: tahoma;
  height: 140px;
  border: 1px solid #ccc;
  color: #555;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  text-decoration: none;
}

.fragment:hover {
    box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}

.fragment img { 
  float: left;
  margin-right: 10px;
}


.fragment h3 {
  padding: 0;
  margin: 0;
  color: #369;
}

Answer 2

整个文字没有浮动在图像的右侧
链接不应为蓝色并加下划线
Box应该是单击的

编号1：文本浮动在右侧。
2号： Css： a{text-decoration:none; color:#000000;}
数字3：要使整个框可以点击，您可以在其周围添加<a>个标记。

使用css和html创建像facebook这样的url预览

2 个答案: