Question

好吧，我遇到了一些问题，我相信这是一个CSS问题。以下是我目前正在进行的工作：http://www.notedls.com/demo/

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

我遇到的问题（如果不清楚）是与图像和文本的间距。我可以简单地增加ui.accordion-acc或-left的高度以使一切都合适，但这并不能解决问题。如果您在单击标题1的第一个扩展时发现它，它将在图像下方包含视图注释。这是我不想要的，我已经尝试将这些元素分成额外的div甚至浮动，但它只是不起作用。基本上，我想在图像下无限地留下空白区域，但文章+评论可能需要很长时间。

Answer 1

尝试添加此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（只需稍微缩进注释）以匹配缩略图大小。

问题是手风琴中有手风琴，所以当你添加像ul.ui-accordion-container li a.ui-accordion-link这样的通用手风琴CSS类时，它会影响两个级别。这就是评论降低62px的原因。

您已经拥有了更多可以使用的特定类...尝试此ul.ui-accordion-container li a.acc1但我不建议在链接中添加高度，而是将其添加到<h1>以匹配缩略图高度。所以试试这个：

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; 
}

Answer 2

怎么漂浮不起作用？我认为你可以这样做：

.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>

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

2列;多手风琴窗格

2 个答案: