Jquery 2柱；多折叠式窗格

好吧，我有一些问题，我相信这是一个CSS问题。 以下是我目前正在进行的工作：

关注新闻手风琴菜单。 这里的想法是有一个小图像（50x50带填充），然后在旁边有一个大标题。当用户单击标题时，它将扩展到文章。如果用户想要阅读评论或自己发表评论，他们可以单击查看评论进一步展开

我遇到的问题（如果不清楚的话）是图像和文本的间距。我可以简单地增加ui.accordion-acc或-left的高度，使所有内容都适合，但这并不能解决问题。如果您在单击标题1的第一个展开部分时注意到，它将在图像下方环绕视图注释。这是我不想要的，我尝试过将这些元素分离成额外的div，甚至是浮动，但它就是不起作用。基本上，我希望图像下方的空白无限长，无论文章+评论占据字段的时间有多长。

尝试添加此CSS：

ul#acc1 .acc1 { padding-left: 50px; } /* headline */
ul#acc1 > li > div { padding-left: 55px; } /* text block under headline */
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments */
ul#acc1 ul li div { padding-left: 20px; } /* text here under view comments */

我不得不减小视图评论的块大小，因为它被推到了右边。调整50px、55px、487px（设置宽度为542px减去55px）和20px（只是稍微缩进注释）以匹配缩略图大小

---

问题是手风琴中有一个手风琴，所以当你添加通用的手风琴CSS类，比如

ul.ui-accordion-container li a.ui-accordion-link

时，它会影响两个级别。这就是为什么评论下降了62像素

您已经有了更多可以使用的特定类。。。尝试此

ul.ui-accordion-container li a.acc1

，但我不建议为链接添加高度，而是将其添加到

以匹配缩略图高度。所以试试这个：

h1 {
 float: left;
 margin: 0px;
 padding: 1px;
 font-size: 30px;
 color: #9667cc;
 height: 65px;
}
ul.ui-accordion-container li a.acc1 { 
 display: block; 
 padding-left: 5px; 
 margin-right: 3px; 
 height: 62px;
 color: #000; 
 text-decoration: none; 
 line-height: 28px; 
}
ul.ui-accordion-container li a.acc2 { 
 line-height: 28px; 
}

---

为什么浮动不起作用？我想你可以这样做：

.img {float: left; width: 50px; padding: 5px;}
.title {float: left; width: 300px; padding: 5px;}
.clear {clear: both; height: 1px;}

<div class="img"><img src="img/news_ffxiv_a.jpg"></div>
<div class="title">TITLE</div>
<div class="clear"><!-- --></div>

.img{float:左；宽度：50px；填充：5px；}
.title{float:left；宽度：300px；填充：5px；}
.clear{clear:两者；高度：1px；}
标题

---

这将在图像下创建无限的空间，因为另一个div靠着它向左浮动。关键是两个项目都浮动，而不仅仅是一个。

Hmm，它可以工作，有点像。我必须增加ui手风琴左acc1的高度，以便它可以容纳所有内容，但是现在我在查看注释和实际注释之间有了这些惊人的差距。另外，我在“文章文本”的第一行后面有一个奇怪的缩进。我已经更新了我的答案。。。我希望这更接近你想要的。啊！很好，非常感谢！我已经盯着这个垃圾看了这么久了哈哈：