我正在一个新站点上工作(带有高级购买模板的Wordpress)。模板开发人员无法解决此问题, 因此我希望这里有人可以提供帮助。
如果你在Chrome页的底部查看http://test.one.za.com/wp-test/?page_id=112, 则3个联系人div的排列不正确。但是, 如果你在IE或Firefox中查看此页面, 则显示效果很好。
对于我的一生, 我无法弄清楚这是什么或如何解决。
这是CSS:
页脚的主要容器:
.main-footer {
position: relative;
background-color: #303030;
overflow: hidden;
}
这是” 信息部分” 的容器:
.main-footer .footer-info-section {
position: relative;
margin-top: -5px;
background-color: #303030;
border-top: 1px solid rgba(255, 255, 255, 0.10);
border-left: 1px solid rgba(255, 255, 255, 0.10);
border-right: 1px solid rgba(255, 255, 255, 0.10);
}
最后, 在” 信息部分” 内的div代码:
.main-footer .footer-info-section .info-block {
position: relative;
}
整个页脚部分的HTML:
<
footer class="main-footer">
<
!--Widgets Section-->
<
div class="auto-container">
<
div class="widgets-section">
<
div class="row clearfix">
<
div class="widget_text footer-column col-md-4 col-sm-6 col-xs-12">
<
div class="widget_text footer-widget widget_custom_html" id="custom_html-2">
<
h2>
Test 1<
/h2>
<
div class="textwidget custom-html-widget">
sdgsfhdfgg sdfgs dfg sfg fgdgsdfg sdfg sdfg sdf<
/div>
<
/div>
<
/div>
<
div class="footer-column col-md-4 col-sm-6 col-xs-12">
<
div class="footer-widget widget_categories" id="categories-2">
<
h2>
Test 2<
/h2>
<
ul>
<
li class="cat-item cat-item-16">
<
a href="http://www.srcmini.com/#">
Home 2<
/a>
<
/li>
<
li class="cat-item cat-item-1">
<
a href="http://www.srcmini.com/#">
Uncategorized<
/a>
<
/li>
<
/ul>
<
/div>
<
/div>
<
div class="footer-column col-md-4 col-sm-6 col-xs-12">
<
div class="footer-widget widget_recent_entries" id="recent-posts-2">
<
h2>
Test 3<
/h2>
<
ul>
<
li>
<
a href="http://www.srcmini.com/#">
1996<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#">
Hello world!<
/a>
<
/li>
<
/ul>
<
/div>
<
/div>
<
/div>
<
/div>
<
!--Footer Info Section-->
<
div class="footer-info-section">
<
div class="row clearfix">
<
!--Info Block-->
<
div class="info-block col-md-4 col-sm-6 col-xs-12">
<
div class="inner">
<
div class="icon fa fa-glass">
<
/div>
<
h4>
Contact 1<
/h4>
<
div class="text">
Contact 1<
/div>
<
/div>
<
/div>
<
!--Info Block-->
<
div class="info-block col-md-4 col-sm-6 col-xs-12">
<
div class="inner">
<
div class="icon fa fa-music">
<
/div>
<
h4>
Contact 2<
/h4>
<
div class="text">
Contact 2<
/div>
<
/div>
<
/div>
<
!--Info Block-->
<
div class="info-block col-md-4 col-sm-6 col-xs-12">
<
div class="inner">
<
div class="icon fa fa-heart">
<
/div>
<
h4>
Contact 3<
/h4>
<
div class="text">
Contact 3<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
!--Footer Bottom-->
<
div class="footer-bottom">
<
div class="auto-container">
<
div class="row clearfix">
<
div class="column col-md-6 col-sm-12 col-xs-12">
<
div class="copyright">
ONE Insurance Underwriting Managers (PTY) LTD Reg No. 1996/008987/07 Authorised Financial Services Provider FSP8783 VAT No. 4370160501
<
/div>
<
/div>
<
div class="nav-column col-md-6 col-sm-12 col-xs-12">
<
ul class="footer-nav">
<
!-- This is just where the foot-nav is located. Redacted this because the links and class names for those links are tediously long and makes this even harder to read -->
<
li>
Footer-nav 1<
/li>
<
li>
Footer-nav 2<
/li>
<
li>
Footer-nav 3<
/li>
<
/ul>
<
/div>
<
/div>
<
/div>
<
/div>
<
!--End Footer Bottom-->
<
/footer>
我已经附上了一些片段, 显示了它们在各个浏览器中的显示方式。
文章图片
文章图片
#1 【HTML/CSS跨浏览器对齐问题】在此处的代码中添加clear:both:
.main-footer .footer-info-section{
clear:both;
}
推荐阅读
- 我无法调用自定义帖子类型的类别
- HTML/WordPress插件可帮助内容管理
- 短代码中的HTML和类选择选项
- 如何在一个函数中使用提交的值到另一个函数,然后在wordpress插件中使用shortcode使用值
- 如何在WordPress中使用自定义小部件
- 如何在Visual Composer’vc_map’中使用’custom_markup’参数()
- 如何使用Timber模板引擎将CSS中的ACF图像字段与媒体查询一起使用()
- 如何在WordPress中更新多个meta_key的用户元
- M386AAG40MMB-CVFC0内存条