Question

我需要使用CSS

交换2个元素的视觉顺序

HTML订单：

<div id="text-content">
....
</div>
<div id="header-image">
....
</div>

需要视觉订单：

   ______________________ 
  |   image              |
  |   (fixed height)     |
  |______________________|

   ______________________ 
  |   text               |
  |   (variable height)  |
  |______________________|

我似乎无法正常显示它们。我可以完全访问XHTML和CSS，只需要将视觉顺序交换为SEO目的，同时尽可能地保持文本尽可能远的代码。干杯...

Answer 1

我认为最好的方法是

为文字div padding-top: xyz提供徽标空间，其中xyz是徽标的高度
和position: absolute; top: 0px; left: 0px徽标。

然而，我无法想到任何搜索引擎优化的场景，这将带来任何显着的优势。

Answer 2

试试这个......

#text-content {float: left; margin: 320px 0 0 0;}
#header-image {float: left; position: absolute;}

<div id="text-content">
    Image description
</div>
<div id="header-image">
    <img src="test.gif" alt="image"/>
</div>

此示例假设您有一个高度为300像素的图像，并且您希望图像与其下方的文本之间有20像素的填充。

希望这会有所帮助

使用CSS交换文本和图像顺序

2 个答案: