CSS定位图片和文字答案

【问题标题】：CSS positioning images and textCSS定位图片和文字
【发布时间】：2010-10-28 15:13:01
【问题描述】：

我正在尝试在两个图像之间获取一些文本。图片定位正确，但出现了一些奇怪的设计问题。

我想弄清楚的是：

任何帮助将不胜感激！

【问题讨论】：

标签： html css

【解决方案1】：

这有点不对

    .top-pic {
    position: absolute;
    top: -5.7em;
    right: -1.5em;
    z-index: 1;
}

将此图片剪切为 2 张图片（一张在标签旁边的标题中，一张在内容中）。由于您的 z-index，东西漂浮在下面。

在您的 CSS 中。你想要的是一个非常基本的固定 3 列布局，中间有文本。我会在这里指给你：

这就是 CSS 布局的完成方式。

【讨论】：

【解决方案2】：

如果您将顶部图片移动到徽标上方并更改样式，您可以获得与您想要的类似的效果。

<div class="top-pic">
  <img src="index2_files/girlbird.png">
</div>
<div class="logo">
  <img src="index2_files/logo-center.png">
</div>

CSS 变化

.top-pic {
    float: right;
    position: relative;
    top: -50px;
    right: -25px;
}

【讨论】：

【解决方案3】：

我建议不要像 Aiden 建议的那样拆分图像。这很混乱，而且不完全是现代的解决方法。试试这样的：

.top-pic {
    float: right;
    margin-top: -200px;
}

将顶部边距分配更改为您想要的图像像素高。剩下的唯一问题是缩放顶部文本 div 的宽度以适应图像。一种方法是将padding-right: 250px; 左右设置为.top-text h1 和.top-text h2。

【讨论】：