0

我正在尝试在 Joomla 上为我的特色文章页面实现自定义布局，以便使用我在 Photoshop 上制作的自定义设计制作一个不错的博客布局。

这是我想要实现的外观：http: //i48.tinypic.com/2ztbx54.png

这是我现在得到的样子：http: //i49.tinypic.com/1ibn5w.png

其余的布局不会有问题，因为它很容易修改，但是，我现在卡住的问题是介绍图像。我希望它位于文章标题的左侧，一些信息和介绍文本，如第一张图片所示。

是否可以从介绍文本中提取图像以便将其放置在需要的地方？

帮助将不胜感激，谢谢！

4

2 回答 2

1

首先，我的评论只是一个玩笑。

现在，对于问题：您的图像位于 div 中item column-1，而它应该位于 div 上方（的容器item column-1）中，即items-row cols-1 row-0.

所以这：

<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">

不能进去，<div class="items-row cols-1 row-0">或者<dl class="article-info">你正在做什么。

它需要位于外部 div 中。所以应该在<div class="items-row cols-1 row-0">. 所以像这样：

<div class="items-row cols-1 row-0">
  <img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
//...and the rest of your stuff
于 2012-08-16T18:40:08.670 回答
1

在您的 css 文件中添加以下代码以帮助您开始：

.article-info {
    float:right;
}
h2 { 
    text-align: right; 
}
.item.column-1 img {
    margin-top: -50px;
}
.article-info-term { 
    padding-left: 40px; 
}

另外，带走margin: 0px;您添加到图像中的内容。

这将是结果：

http://i735.photobucket.com/albums/ww355/lodder16/stack_image.png

希望这可以帮助

于 2012-08-16T18:30:13.877 回答