时间戳

首页 > 解决方案 > 如何在徽标旁边浮动图像？

html - 如何在徽标旁边浮动图像？

问题描述

我正在使用带有 Newspress Extend 主题的 Wordpress 5.2.2 作为父级。

我在外观 - > Newspress 选项中恢复了主题的默认设置，试图修复一些不相关的东西，并丢失了浮动广告的自定义 html/内联 css，一个左一个右一个夹着徽标。哎呀。我试图根据我对 html/css 非常有限的了解来猜测替换代码，它不仅将它们呈现在徽标之上，而且还呈现在顶部菜单之上。我知道可以在本节中完成此更改，因为我只是试图将其恢复到以前开发人员的状态。帮助将不胜感激。

外观 --> Newspress 选项 --> 常规选项 --> Head 区域内的自定义代码（所有页面）

<a href=https://www.flalottery.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery" style="float:left; max-width: 25%;"></a>

<a href="https://www.southeasternhonda.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"/ style="float: right; max-width: 25%;"></a>

自定义css截图

Newspress 主题自定义界面中的徽标截图

有问题的页面

标签： htmlcsswordpressimagestyling

解决方案

您的广告位于容器 div 之外。他们现在实际上位于网站的元标记之上。CSS 是一个强大的工具，但它不应该用于过度纠正或掩盖不正确的 HTML 结构。您需要将广告填充到各自的 div 中。

这就是您的 HTML 的外观，特别是对于您的标题 div：

<div id="header">
        <div id="header-content">

    <!-- Site Titele and Description Goes Here -->
    <div class="topadlft"><a href="https://www.flalottery.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery"></a><a href="#" target="_blank"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></a></div> 
    <a href="https://ebonynewstoday.com/"><img class="site-logo" src="http://ebonynewstoday.com/wp-content/uploads/2017/04/Ebony_LOGOHorizontal_Color.gif"><h1 class="site-title-hidden">Ebony News Today</h1></a>

    <h2 class="site-title-hidden">"The Heartbeat of Our Community"</h2>        
    <div class="topadrt"><a href="https://www.southeasternhonda.com/" target="_blank" rel="noreferrer noopener"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"></a><a href="#" target="_blank"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></a></div> 

    </div><!-- header-content -->
    <div class="heading-date">Friday, October 4, 2019</div>  
    </div>

您还需要关闭“display:none;” CSS 文件中用于“topadlft”和“topadrt”类的选择器。还要从每个广告图片中删除内嵌样式。您将希望包含广告的 div 类在这里完成繁重的工作。内联样式只会导致进一步的复杂化。

一旦你解决了上述问题，你应该得到如下所示的东西：

固定标题图像

推荐阅读