图像上的三重标题工作不好

Question

我有一些问题。我试图将标题放在图像上

• 第一个标题（cat1）可以是小的还是长的
• 第一个冠军后的第二个冠军（猫2）juste
• 第三个标题（在第二个标题之后） 这些标题必须是内联的

参见我的演示jsfiddle http://jsfiddle.net/cyphos/jntea/]

感谢您的回复

Answer 1

据我了解，你如何实现这一点取决于你创造什么是好的。如果您可以指定每个元素的宽度，那么完成它不是问题。然后，您可以简单地为左右元素指定宽度，然后将中心元素直接定位在两者之间。看到这个小提琴作为一个例子：

CSS only Fiddle

这使用盒子大小的边框模型来简化操作。 Read this for clarification

基本上是：

.cta1 {left:0;width:150px;}
.cta2 {left:150px;right:150px;}
.cta3 {right:0;width:150px;}

OR

如果您希望这些项目是动态的，则需要使用Javascript / jQuery来获取元素的宽度，然后相应地设置中心的left和right属性。 jQuery中的一个例子

jQuery based fiddle

var cat1Width = $('.cat1').width();
cat1Width = cat1Width + 26; //26 being a pixel measure of the padding of the element
$('.cat2').css('left', cat1Width);

有了这个，你必须将填充值添加到cta1Width变量，因为jQuery不返回包含填充的宽度值。可以手动执行此操作（通过自己添加像素值），也可以使用jQuery see this thread for info

提取填充宽度