小提琴(您可能需要调整结果窗格的大小):http: //jsfiddle.net/BxVrf/1/
客观的:
问题:
0) 如您所见,我在图形设计方面比在代码方面要好得多。
1)我试图让手风琴标签对角线(目前我可以让它与垂直div一起干净地工作),但是没有创建一个巨大的图像,我找不到一种独立于分辨率的方法来做到这一点。使用渐变将不起作用,因为我使用的是 box-shadow,并且会显示透明边框。无论有没有 zAccordion(我在 Fiddle 中对它们进行了注释),CSS 转换的结果也不尽如人意。
2) 我希望 CSS 文本流如底部图像所示。我发现 CSS Text Wrapper 不太理想,并且 Fiddle 在其他地方发布如下,再次返回不太理想的结果,目前不在 Fiddle 待解决的第一个问题:
var element, width, height, fontSize, numberOfParagraphs, lineHeight, numberOfLines, offsetIncrement, highestValue;
element = jQuery('p.all');
width = element.width();
height = element.height();
fontSize = element.css('font-size');
numberOfParagraphs = element.length;
lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
numberOfLines = height/lineHeight*numberOfParagraphs;
offsetIncrement = 8.5;
highestValue = Math.floor(numberOfLines*offsetIncrement);
for(var index = 0; index <= numberOfLines; index++) {
element.eq(0).before('<span class="text-offset" style="width: '+highestValue+'px; float: left; height: '+lineHeight+'px; clear: both;"/>');
highestValue = highestValue-offsetIncrement;
}
如果有人能指出我正确的方向,我将永远感激不尽。