我正在制作一个带有自定义模板的wordpress网站。
我制作了两个自定义侧边栏区域，用于广告（从主网站容器左侧和右侧）。
左边的一个工作得很好（我想让它们都是100vh或至少有10％的上边距，这没有用，但它并不重要），但是右边的一个显示在屏幕下方。我检查了几次，右边的代码与没有正确定位的左边的代码相同
我使用的代码如下：
的functions.php
register_sidebar(array(
'name'=> 'Ads Sidebar Background Left',
'id' => 'ads-sidebar-back-left',
'before_widget' => '<div class="ads-sidebar-back-left-css">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'Ads Sidebar Background Right',
'id' => 'ads-sidebar-back-right',
'before_widget' => '<div class="ads-sidebar-back-right-css">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
的header.php
<div id="ads-sidebar-back-left" class="ads-sidebar-back-left-css" role="complementary">
<?php dynamic_sidebar( 'Ads Sidebar Background Left' ); ?>
</div>
<div id="ads-sidebar-back-right" class="ads-sidebar-back-right-css" role="complementary">
<?php dynamic_sidebar( 'Ads Sidebar Background Right' ); ?>
</div>
的style.css
div.ads-sidebar-back-left-css {
height:100%;
position:absolulte;
top: 10%;
overflow:hidden;
z-index:1000;
width: 30%;
}
.ads-sidebar-back-left-css img{
height: 100vh;
}
div.ads-sidebar-back-right-css {
height:100%;
position:absolulte;
float: right;
right:5px;
overflow:hidden;
z-index:1000;
width: 30%;
}
.ads-sidebar-back-right-css img{
height: 100vh;
}
之后我将广告小部件添加到其中，并使用相应的尺寸和广告脚本。
当我试图按照div时，我看到正确的一个没有生成一些div或tormus div工具的输出是：
<div class="background-cover">
|<div id="ads-sidebar-back-left" class="ads-sidebar-back-left-css" role="complementary">
| |<div id="ads300_600-widget-4" class="ads300-600">
| | |<div class="ad-cell">
| | |</div>
| |</div>
|</div>
|<div id="ads-sidebar-back-right" class="ads-sidebar-back-right-css" role="complementary">
| |<div class="ads-sidebar-back-right-css">
| | |<div class="ads300-600">
| | | |<div class="ad-cell">
| | | |</div>
| | |</div>
| |</div>
|</div>
我无法理解为什么左边有不同的前端div，因为我使两个区域都相同。
从W3.org验证器我有：
Info: The Content-Type was text/html. Using the HTML parser.
Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support.
Error: Duplicate attribute prefix.
At line 2, column 57
.me/ns#" prefix="og: http://og
Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.
From line 61, column 1; to line 61, column 64
</script>↩<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />↩<meta
Error: End tag div seen, but there were open elements.
From line 330, column 3; to line 330, column 8
</div> ↩ </div> ↩ <
Error: Unclosed element nav.
From line 267, column 10; to line 267, column 54
↩ <nav id="main-nav" class="fade-in animated2">↩ <
Error: Stray end tag nav.
From line 331, column 4; to line 331, column 9
/div> ↩ </nav><!-- .
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 333, column 3; to line 333, column 35
er /-->↩ <div class="clear" align="right"><span
Warning: Empty heading.
From line 1281, column 113; to line 1281, column 116
dget-top"><h4> </h
Error: The scrolling attribute on the iframe element is obsolete. Use CSS instead.
From line 1283, column 5; to line 1283, column 366
box">↩ <iframe src="http://www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/Peoples.Repub…order="0" style="border:none; overflow:hidden; width:300px; height:250px;" allowTransparency="true"> </ifra
Error: The frameborder attribute on the iframe element is obsolete. Use CSS instead.
From line 1283, column 5; to line 1283, column 366
box">↩ <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Peoples.Repub…order="0" style="border:none; overflow:hidden; width:300px; height:250px;" allowTransparency="true"></ifra
Error: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.
From line 1283, column 5; to line 1283, column 366
box">↩ <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Peoples.Repub…order="0" style="border:none; overflow:hidden; width:300px; height:250px;" allowTransparency="true"></ifra
Error: The align attribute on the div element is obsolete. Use CSS instead.
From line 1409, column 1; to line 1409, column 68
</script>↩<div align="center" style=" text-align:center; position:relative;"><span
它们都与这两个领域无关。
如何对齐网站右侧的右侧边栏区域以及如何将它们设为100vh？
此致 伊万