多手风琴的 CSS 问题

发布于 2024-08-27 18:35:53 字数 401 浏览 9 评论 0原文

我很确定我遇到了 CSS 问题,但我就是不知道如何纠正它。目前,我让这些手风琴工作得很好,它们会折叠、展开、在被告知时再次展开等等。

我遇到的问题是对齐这些手风琴 div 中的内容。理想情况下,当一切都是默认(折叠)时,我想看到的只是缩略图和标题。然后,如果用户愿意,他们可以单击标题,标题就会展开,如果他们想要发表评论或查看评论,他们可以再次单击以展开。

事情是这样的,我必须将高度设置为 62 像素,这样所有东西都会适合并且不会到处漂浮。这会导致“查看评论”到“此处文本”区域出现问题,因为您可以看出两者之间的空间过大。

另一个问题是,正如我目前所拥有的那样,我强制缩进文章文本,这样它就不会在缩略图下方进行文本换行。基本上,我希望它分成两列,这样图像下方就不会出现任何内容,但是使用这个手风琴和 div 内的 div 对我来说很困难。

I'm pretty sure I'm having a CSS issue, but I just can't figure out how to correct it. Currently, I have these accordions working perfectly, they collapse, expand, expand again when told to etc.

The problem I'm having is aligning the content within these accordion divs. Ideally, when everything is default (collapsed) all I want seen is the thumbnail image and the Headline. Then if the user wishes, they click on the headline and it expands and if they want to make a comment or view comments, they can click once again to expand that.

Here's the thing, I have to make the height 62px so everything will fit in and just not float all over the place. This creates a problem with the "View Comments" to "Text Here" area, as you can tell it has outrageous space between the two.

The other issue is, as I currently have it I'm forcefully indenting the article text so that it doesn't TEXT WRAP underneath the thumbnail image. Basically, I want it split into 2 columns so nothing ever goes beneath the image, but working with this accordion and divs inside the divs it's proving to be difficult for me.

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

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

发布评论

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

评论(1

静若繁花 2024-09-03 18:35:53

您可以在 CSS 中定义它来设置高度:

.acc2 { height: auto !important; }

由于您的子手风琴的标题上有一个 acc2 类,因此这将覆盖,恢复默认高度以匹配文本。

You can define this in your CSS to set the height:

.acc2 { height: auto !important; }

Since your child accordions have an acc2 class on their header, this will override, restoring a default height to match the text.

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