我有这个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帖子,但是我不确定从哪里开始。
想法是这是新闻帖子的预览,我将在讨论该帖子的博客文章中进行链接。这是我用来生成它的hexo插件。 https://github.com/minamo173/hexo-tag-link-preview
至少需要将其装箱。到目前为止,它只是继承了典型帖子的链接和图像样式。
答案 0 :(得分:1)
这里是一个建议,可以添加虚线边框,标题上更大的字体以及锚点和标题上的一些填充,以使它们看起来都不错:)
并有一个小技巧(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>
答案 1 :(得分:0)
我猜您正在寻找图像的缩略图和标题。
<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>