-3

独自の URL プレビューを作成しようとしています。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

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: テキストは右側に浮いています。
2: Css: a{text-decoration:none; color:#000000;}
3: ボックス全体をクリックできるようにするには、その<a>周りにタグを配置します。

于 2013-10-30T14:48:00.640 に答える