在 Wordpress 中并排添加两个标题图像

Posted 2023-03-06

【中文标题】在 Wordpress 中并排添加两个标题图像

【英文标题】：Adding two header images side-by-side in Wordpress

【发布时间】：2012-12-28 17:34:18

【问题描述】：

我正在尝试在基于 Arras 的 Wordpress 子主题中的默认值旁边添加第二个标题图像。现在，只有第一个，左边的图像，正在出现。右边除了空白之外什么都没有。我想知道我做错了什么——是我的标记错误还是主题本身的限制。

这是它现在的样子：http://traycezpr.currentecalamo.org/

#header 
    height:165px;
    width:960px;
    margin: 0 auto;
    position: relative;
    background:transparent;
    border:none;


#header h1 
    display:block;
    float:left;
    width:800px;
    height:165px;
background:url(http://traycezpr.currentecalamo.org/wp-content/uploads/2013/01/TZLTER.jpg) no-repeat 0 0;
    background-size: 800px; 165px;
    text-indent:-10000px;


#header h2 
    display:inline;
    float:right;
    position:relative;
    width:160px;
    height:165px:
    text-indent:-10000px;   background:url(http://traycezpr.currentecalamo.org/wp-content/uploads/2013/01/TZCH7.jpg) no-repeat 0 0;
    background-size:160px; 165px;

【问题讨论】：

首先，您的 css 中有一个错误。您在 h2 上的 height:165px 之后放置了一个冒号而不是分号。而且您不能定义这样的属性：background-size: 800px; 165px;。分号结束声明。使用开发人员工具 (chrome) 或 firebug (firefox) 会立即突出显示这些问题，以便您可以快速调试并试一试。

【参考方案1】：

你需要做两件事：

添加高度：165px；到#header hs 在 default.css (.logo) 的第 48 行将 max-width 更改为 100%

【讨论】：

而且...你的背景尺寸有一个 ;在里面..那不应该在那里.. ;)

【参考方案2】：

user.css 第 22 行代码不正确。上面写着：

height:165px: text-indent:-10000px

而它应该是：

height:165px;
text-indent:-10000px;

您还将.logo（h 标签嵌套在其中）设置为：

max-width:590px

你应该让这个跨越整个宽度，比如：

width:100%

我还建议为您的图像使用实际的 divs 而不是 h 标记。 h 标签通常用于文本标题/seo。

【讨论】：

谢谢。我修复了错误并删除了 h2 下的 float:right，添加了 left:800px 以使两个图像对齐。将不得不努力将这些转换为 div，但现在这很有帮助。

别担心，不过我肯定会查看那些h 标签。只需将 <h1...></h1> 更改为 <div...></div> 并稍微调整一下您的 CSS 样式即可。