-3

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

我去：小提琴：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

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

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

数据将来自表格。即 url、预览、图片 url、desc 等

4

2 回答 2

4

你去：

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;
}
于 2013-10-30T14:48:04.957 回答
2
  1. 整个文本没有漂浮在图像的右侧
  2. 链接不应为蓝色和下划线
  3. 框应该是可单击的

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

于 2013-10-30T14:48:00.640 回答