0

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

  • 第一个标题 (cat1) 可以小或长
  • 第二个标题（第 2 类）就在第一个标题之后
  • 第三个标题（在右边的第二个标题之后）这些标题必须是内联的

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

谢谢您的答复

4

1 回答 1

1

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

仅 CSS 小提琴

这使用 box-sizing 边界框模型来简化事情。阅读此内容以进行澄清

基本上：

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

或者

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

基于 jQuery 的小提琴

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 提取填充宽度，请参阅此线程以获取信息

于 2013-07-22T14:06:34.623 回答