css - 图像上的三重标题效果不好

Question

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

• 第一个标题 (cat1) 可长可短
• 第二个标题(类别 2)仅在第一个标题之后
• 第三个标题(在右边第二个标题之后)这些标题必须内联

查看我的演示 jsfiddle http://jsfiddle.net/cyphos/jntea/]

感谢您的回复

Answer 1

据我了解，您如何实现这一点取决于您对创建的内容是否满意。如果您可以指定每个元素的宽度，那么实现起来不是问题。然后，您可以简单地为左右元素指定宽度，然后将中间元素直接放在中间。以这个 fiddle 为例:

CSS only Fiddle

这使用 box-sizing border-box 模型来简化事情。 Read this for clarification

基本上:

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

或

如果您希望这些元素是动态的，您将需要使用 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 提取填充宽度