最受欢迎

自定义WordPress主题中的CSS折叠布局和神秘边距

CSS collapsing layout and mysterious margin in custom WordPress theme

本文关键字：布局 折叠 CSS WordPress 自定义 | 更新日期: 2023-09-27

我正在为朋友制作一个简单的wordpress主题，该主题将专门为他将要发布的内容而设计。我现在正在为动态 php 内容切换临时静态内容。

我对CSS的了解有限，通常花一半的时间在谷歌上搜索东西，现在我遇到了第一个真正的问题，我找不到自己的解决方案。在我的主题的索引.php部分中是一个div，其中包含两个浮动div，左（主要内容）和右（额外内容），左边的div 将始终包含内容（获取新闻帖子的 WP 循环），而右边的有时可能是空的（这里我有一个循环，可以获取我想突出显示的帖子的特色图像， 链接到该帖子）。

现在，如果右侧div 中未显示任何帖子，则包含的div 将忽略左侧div 并折叠。我以前遇到过它崩溃的问题，我通过给容器这个 CSS 来解决：

    overflow: auto;
}
    * html #main {
    height: 1%;
}

这是我的索引 html.php（"main_left"中的静态内容稍后将替换为 WP 循环）：

<?php get_header(); ?>
<div id="main"><div id="main_left"><h2>Välkommen till Klamas Kultur & Nöje!</h2><p class="small">Klamas Kultur & Nöje producerar fars, komedi och barnteater – både inomhus och utomhus – i hela Västsverige, och har gjort så sedan 1987.</p><hr />
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på <a href="#">Fjärås Bygdegård</a>, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green.  Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green.  Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green.  Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
    </div>
    <div id="main_right">
        <div id="main_right_top"><h3>AKTUELLT</h3></div>
    <?php query_posts('cat=4 &posts_per_page=3'); while (have_posts()) : the_post(); ?>
        <div class="main_right_contents"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a><a href="<?php the_permalink(); ?>" class="boka">Mer info & Bokning</a></div>
    </div>
    <?php endwhile; ?>
    </div>
<?php get_footer(); ?>

"main"-div 位于跨越整个布局的两个附加div 中;"阴影"和"包装器"。

这是完整的CSS样式表：

body {
    margin: 0px;
    background-attachment: fixed;
    background-image: url(graphics/burnBG.jpg);
    background-repeat: repeat-y;
    background-position: center top;
}
#dropshadow {
    width: 990px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    background-image: url(graphics/dropShadow.png);
    background-repeat: repeat-y;
    margin-bottom: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
#wrapper {
    width: 950px;
    height: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
#header {
    background-color: #FFFFFF;
    height: 260px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
}
#banner {
    background-color: #FFFFFF;
    margin: 0px;
    height: 225px;
    width: 100%;
}
#slider_container {
    z-index: 9;
    position: relative;
}
#logo {
    z-index: 10;
    margin-top: -225px;
    position: relative;
}
#menu {
    background-color: #ffff2d;
    height: 35px;
    margin: 0px;
}
#main {
    width: 950px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
    overflow: auto;
}
    * html #main {
    height: 1%;
}
#main_left {
    width: 572px;
    height: 100%;
    float: left;
    border-right-width: 3px;
    border-right-style: dotted;
    border-right-color: #ffff2d;
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
}
#main_right {
    float: right;
    width: 325px;
    height: 100%;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
}
#main_right_top {
    width: 250px;
    margin-right: 25px;
    margin-left: 20px;
    padding-right: 15px;
    padding-left: 15px;
    height: 28px;
    background-image: none;
    background-color: #883831;
    line-height: 28px;
}
.main_right_contents {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 280px;
    margin-right: 25px;
    margin-left: 20px;
    background-image: url(graphics/diagonalstripes.png);
    background-repeat: repeat;
    margin-top: 10px;
}
#main_full {
    width: 870px;
    height: 100%;
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 25px;
    padding-left: 40px;
}
#main_full a:link{
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
#main_full a:hover{
    color: #000000;
    text-decoration: none;
    background-color:#ffff2d;
}
#main_full a:visited{
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
#footer {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    height: 150px;
    margin-bottom: 0px;
    border-top-width: 7px;
    border-top-style: double;
    border-top-color: #ffff2d;
    background-image: url(graphics/footerBG.jpg);
    background-repeat: repeat-x;
}
#footer a:link{
    font-family: Arial, Helvetica, sans-serif;
    color: #cb867c;
    text-decoration: none;
}
#footer a:hover{
    color: #000000;
    background-color:#ffff2d;
}
#footer a:visited{
    font-family: Arial, Helvetica, sans-serif;
    color: #cb867c;
}
#footer_contents {
    margin: 0px;
    height: 130px;
    width: 910px;
    padding-right: 20px;
    padding-left: 10px;
    color: #cb867c;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    vertical-align: bottom;
}
#footer_contents_left {
    float: left;
    width: 600px;
    padding-top: 110px;
}
#footer_contents_right {
    float: left;
    width: 200px;
    padding-top: 10px;
    padding-left: 110px;
}
#copyright {
    width: 865px;
    margin-bottom: 0px;
    padding-right: 45px;
    padding-left: 20px;
    padding-top: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #cb867c;
    padding-bottom: 0px;
    bottom: 0px;
    height: 25px;
    text-align: right;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #cb867c;
    margin-right: auto;
    margin-left: auto;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: normal;
}
p.small{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    font-weight: normal;
}
h1 {
    font-family: "Trebuchet MS";
    font-size: 18px;
    font-style: normal;
    color: #000000;
    font-weight: bold;
}
h2 {
    font-family: "Trebuchet MS";
    font-size: 20px;
    color: #000000;
    font-style: italic;
}
h3 {
    font-family: "Trebuchet MS";
    font-size: 18px;
    font-style: normal;
    color: #E9CDC9;
    font-weight: bold;
}
h4 {
    font-family: "Trebuchet MS";
    font-size: 14px;
    font-style: normal;
    color: #000000;
    font-weight: bold;
    margin-bottom: 5px;
}
hr {
    color: #ffff2d;
    background-color: #ffff2d;
    height: 2px;
    width: 100%;
    border: 0px;
}
#main_left a:link {
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
#main_left a:hover {
    color: #000000;
    text-decoration: none;
    background-color:#ffff2d;
}
#main_left a:visited {
    font-family: "Trebuchet MS";
    color: #000000;
    text-decoration: underline;
}
.nav {
    background-color: #ffffff;
}
  .nav ul {
    overflow: auto;
    width: 950px;
    margin: 0;
    padding: 0;
}
.nav li {
    float: left;
    list-style: none;
    background-color: #ffff2d;
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: "Trebuchet MS";
    font-size: 1.2em;
    line-height: 35px;
    height: 35px;
    width: 16.6667%;
    width: calc(100% / 6);
    font-style: normal;
}
.nav a {
  text-decoration: none;
  color: #000000;
  display: block;
  transition: .3s background-color;
}
.nav a:hover {
  color: #ffffff;
  background-color: #883831;
  font-style: italic;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
.boka {
    width: 200px;
    height: 30px;
    line-height: 30px;
    background-color: #ffff2d;
    text-decoration: none;
    color: #000000;
    display: block;
    margin-right: auto;
    margin-left: auto;
    transition: .3s background-color;
    cursor:pointer;
    font-family:Trebuchet MS;
    font-size: 1.2em;
    padding:6px 8px;
}
.boka:hover {
  color: #ffffff;
  background-color: #883831;
  font-style: italic;
}
.boka:active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
/* Everything below is for ssslider */
.sss {
    height: 0;
    margin: 0; 
    padding: 0;
    position: relative;
    display: block;
    overflow: hidden;
}
.ssslide {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
}
.ssslide img {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
}
.sssnext, .sssprev {
    width: 25px;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    background: url('images/arr.png') no-repeat;
}
.sssprev {
    left: 3%;
    background-position: 0 50%;
}
.sssnext {
    right: 3%;
    background-position: -26px 50%;
}
.sssprev:hover, .sssnext:hover {
    cursor: pointer;
}

在过去的 3 个小时里，我一直在尝试解决此问题，但没有成功。此外，页面底部有几个像素的边距在整个项目中一直困扰着我。

网站链接： http://wordpress.klamas.se/

折叠div 问题

您可以写下对内容的检查并添加一个空格以防止div 折叠。

<?php
    $args = array(
        'cat' => 4,
        'posts_per_page' => 3
    );
    $the_query = new WP_Query($args);
    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post(); ?>
            <div class="main_right_contents"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a><a href="<?php the_permalink(); ?>" class="boka">Mer info &amp; Bokning</a></div>
        <?php }
    } else {
        echo '&nbsp;';
    }
    wp_reset_postdata();
?>

底边距问题

底部的奇数边距是由于内容对于固定高度的页脚来说太大。对于任何基于内容的内容，我不建议将高度固定为像素值。通过使用具有优雅降级的 CSS3 应用渐变并删除固定高度，我们确保页脚始终正确。

#footer {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    border-top-width: 7px;
    border-top-style: double;
    border-top-color: #ffff2d;
    background: #cd655a;
    background: -moz-linear-gradient(top,  #cd655a 50%, #672324 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cd655a), color-stop(100%,#672324));
    background: -webkit-linear-gradient(top,  #cd655a 50%,#672324 100%);
    background: -o-linear-gradient(top,  #cd655a 50%,#672324 100%);
    background: -ms-linear-gradient(top,  #cd655a 50%,#672324 100%);
    background: linear-gradient(to bottom,  #cd655a 50%,#672324 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd655a', endColorstr='#672324',GradientType=0 );
}

引用

Colorzilla - CSS Gradient Generator - 一个不错的快速CSS3渐变生成器。

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习