2柱;多手风琴窗格

好吧，我有一些问题，我相信这是一个CSS的。以下是我目前的工作：http://www.notedls.com/demo/2柱;多手风琴窗格

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

我遇到的问题（如果不明确）是与图像和文本的间距。我可以简单地增加ui.accordion-acc或-left的高度以使所有内容都适合，但这并不能解决问题。如果您注意到当您点击标题1的第一个展开式广告时，它会在图像下面包装“查看评论”。这是我不想要的东西，我尝试将这些元素分离为更多的div，甚至浮动，但它只是不工作。从本质上讲，无论文章+评论可能需要多长时间，我都希望图片下面有无限的空间。

来源

2010-04-02 Josh

尝试加入这个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 */

我不得不减少的观点意见的块大小，因为它推出的权利。调整50像素，55像素，487像素（设置宽度542像素减去55像素）和20像素（只是缩进评论多一点）以匹配缩略图大小。

那么这个问题是有一个手风琴内的手风琴，所以当你添加像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; 
}

来源

2010-04-02 17:14:13 Mottie

嗯，它的工作，有点。我必须增加ui-accordion-left acc1的高度，以便它可以适合所有内容，但是现在我在View Comments和实际评论的位置之间会出现这些离谱的差距。另外，在“文章文本”的第一行之后，我得到了这个奇怪的缩进。 – Josh 2010-04-03 14:55:37

我已经更新了我的答案......我希望这更接近你想要的。 – Mottie 2010-04-03 16:13:17

啊！很好，谢谢一堆！我一直在盯着这个废话这么久哈哈D： – Josh 2010-04-03 16:27:43

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

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

这应该图像下创造无限空间，因为在其他分区是向左浮动反对。关键是漂浮两个项目，而不仅仅是一个。

来源

2010-04-03 00:22:19 user279860

2柱;多手风琴窗格

回答

相关问题