CSS 文本放置

发布于 2024-08-27 19:08:12 字数 408 浏览 8 评论 0原文

有人知道我如何才能在新闻链接的标题下方显示“作者于 2010 年 4 月 3 日发布 | 0 条评论”,而不将其排除在 A 类之外吗?我希望它的外观、阅读和功能类似于:

[IMAGE] HEADLINE
        Posted by AUTHOR on April 3rd, 2010 | 0 Comments

所有这些都在初始查看字段中,然后用户可以单击并进一步扩展。如果我把它放在 A CLASS 标签中,显然我可以让它工作,但这就是问题所在。我不能把它放在那里。

编辑:忘记向你们展示我目前正在尝试用这个创建什么; http://www.notedls.com/demo

Anyone know how I can get "Posted by AUTHOR on April 3rd, 2010 | 0 Comments" underneath the headline of the news links WITHOUT it being apart of the A CLASS? I want it to look, read, and function like:

[IMAGE] HEADLINE
        Posted by AUTHOR on April 3rd, 2010 | 0 Comments

All of that in the initial looking field, then the user can click and it expands further. I can obviously get it to work if I put it in the A CLASS tag, but that's the problem. I can't have it there.

EDIT: Forgot to show you guys what I'm currently trying to create with this; http://www.notedls.com/demo

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

白色秋天 2024-09-03 19:08:12

很难说没有看到标记,但是这个 css2 选择器模式匹配规范 可能帮助你。您可以使用同级、子级、后代选择器。

另外,您可以尝试 DL/DD/DT html 元素:

<DL>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
</DL>

我没有任何使用这些元素的经验,但我的理解是它们的渲染效果与您发布的示例类似。

请访问 DL 查看它们,< a href="http://msdn.microsoft.com/en-us/library/ms535234(v=VS.85).aspx" rel="nofollow noreferrer">DD,DTw3 网站

Hard to say without seeing the markup, but this css2 selector pattern matching spec might help you. You can use sibling, child, descendant selectors.

Also, you may try the DL/DD/DT html elements:

<DL>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
  <DT>Headline</DT>
  <DD>Posted by AUTHOR on April 3rd, 2010 | 0 Comments</DD>
</DL>

I don't have any experience using those elements, but my understanding is that they render similar to the example you posted.

Check them out at DL, DD, DT and on the w3 site

禾厶谷欠 2024-09-03 19:08:12

我看到您已经有一条规则来定位包含附加文本的 div:其 ul#acc1 >力> div 的内边距为 65px,目前与您使用的图像的大小相同。但您可以轻松地增加它以获得更多缩进。

另外,您可能希望从内部

  • 元素中删除“宽度”规范 - 这些都是默认展开的块级元素获取他们可用的完整宽度。通过为这些指定确切的宽度,您可以冻结它们的大小,并防止它们在显示由于不同的字体大小、屏幕等而发生变化时正常流动。此外,如果您更改了某些内容的宽度或填充(就像我上面建议的那样),您将拥有无论如何都要重新计算所有宽度。使用默认的 width: auto 您不必担心这些事情。

I see you already have a rule to target the div that contains the additional text: its ul#acc1 > li > div and has a padding of 65px, which is currently the same as the size of the images you use. But you can easily increase it to get more indentation.

also, you probably want to drop the 'width' specifications from the internal <ul> and <li> elements - these are all block level elements that by default expand to take the full width available to them. By specifying exact width for these you freeze their size and prevent them from flowing properly when the display changes due to different font sizes, screens, etc. Also if you ever change widths or paddings of something (like I recommend above), you will have to recalculate all the widths anyway. With the default of width: auto you don't have to worry about these things.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文