Как добавить CSS в просмотр ссылок?

kiaraRobles спросил: 13 июня 2018 в 09:47 в: javascript

У меня есть этот HTML:

  <a href="http://waterfordwhispersnews.com/2017/01/19/im-the-only-one-creating-jobs-around-here-local-drug-dealer-slams-government/#FB-Comments" class="link-preview" target="_blank" rel="nofollow">
    <div class="link-area">
      <div class="og-image">
        <a href="http://waterfordwhispersnews.com/wp-content/uploads/2017/01/grater.jpg" title="" class="fancybox" rel="article0">
          <img src="http://waterfordwhispersnews.com/wp-content/uploads/2017/01/grater.jpg">
        </a>
      </div>
      <div class="descriptions">
        <div class="og-title">
        "I’m The Only One Creating Jobs Around Here" Local Drug Dealer Slams Government
        </div>
        <div class="og-description">
          WATERFORD drug dealer Richie 'The Grater' Harrington has today slammed the Irish government for ignoring the young people in his council est…
        </div>
      </div>
    </div>
 </a>

Это выглядит так:

Я хотел бы добавить CSS, чтобы он выглядел больше как Facebook, но я не уверен, с чего начать.

Идея заключается в следующем: Предварительный просмотр новостного сообщения, который я бы связал в сообщении в блоге, обсуждая его. Это модуль, который я использую для его создания. https://github.com/minamo173/hexo-tag-link-preview

По крайней мере, его нужно вставить в коробку. На данный момент он просто наследует стиль для ссылок и изображений для типичный пост.

2 ответа

LGSon ответил: 13 июня 2018 в 10:04

Вот предложение, которое вы можете сделать, добавив пунктирную рамку, более крупный шрифт в заголовке + прописку на якоре и заголовок, чтобы все выглядело хорошо:)

И с помощью маленький трюк (display: table-caption), чтобы текст обернулся и подходил под изображение.

Я также удалил внутреннюю ссылку a, поскольку это недействительно с вложенные якоря.

Фрагмент стека

a.link-preview {
  display: inline-block;
  border: 2px dotted black;
  padding: 5px;
}
a.link-preview .link-area {
  display: table-caption;              /*  make text wrap under image  */
}
a.link-preview .link-area .og-title {
  font-size: 22px;
  padding-bottom: 15px;
}
<a href="http://waterfordwhispersnews.com/2017/01/19/im-the-only-one-creating-jobs-around-here-local-drug-dealer-slams-government/#FB-Comments" class="link-preview" target="_blank" rel="nofollow">
  <div class="link-area">
    <div class="og-image">
        <img src="http://waterfordwhispersnews.com/wp-content/uploads/2017/01/grater.jpg">
    </div>
    <div class="descriptions">
      <div class="og-title">
        "I’m The Only One Creating Jobs Around Here" Local Drug Dealer Slams Government
      </div>
      <div class="og-description">
        WATERFORD drug dealer Richie 'The Grater' Harrington has today slammed the Irish government for ignoring the young people in his council est…
      </div>
    </div>
  </div>
</a>
kiaraRobles ответил: 17 июня 2018 в 03:03
Это было полезно, я сделал некоторые улучшения, спасибо.
dotnetdev4president ответил: 13 июня 2018 в 09:56

Я думаю, вы ищете миниатюру и заголовок для изображения.

<div class="thumbnail">
  <a href="your_image_link.jpg">
    <img src="your_image_link.jpg">
    <div class="caption">
      <p>Lorem ipsum dolor</p>
    </div>
  </a>
</div>

Ссылка: https://www.w3schools.com/bootstrap/bootstrap_images.asp