1

我似乎无法弄清楚我的CSS有什么问题。我正在开发一个 wordpress 模板，无论如何，右边似乎有超过 100% 的空白空间。

这是我的CSS，任何帮助表示赞赏：

/*
Theme Name: Linda Findlay
Theme URI: http://www.piercecreative.ca
Description: A clean and minimal theme that is completely compatible with WordPress 3.0
Author: Matthew Pierce
Author URI: http://piercecreative.ca
Version: 1.0
*/

body{  
  font-family: Arial, Helvetica, Georgia, Sans-serif;
  font-size: 12px;
  background: #fff;
  color: #000000;
  padding: 0px;
  margin: 0;
  min-width: 980px;
}
a:link, a:visited{
  text-decoration: none;
  color: #000000;
}

a:hover{
  color: #5f5f5f;
}

h1 a{
  font-size: 3.5em;
  font-family: 'Quicksand';
  font-weight: 300;
}
#header h1 a:hover{
color: #101010;
}
h3 {
  font-family: 'Quicksand';
  font-size: 24px;
  font-weight: 400;
}

#wrapper{
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  width: 980px;
  text-align: left;
  background: #fff;   
}
#wrapper2{
  width: 980px;
  padding-top: 10px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
} 
#header{
  color: #ddd;
  margin-top: -40px;
  width: 980px;
  height: 100px;
  text-align: center;
}
#border{
width: 980px;
height: 1px;
background-color: black;
float: left;
margin-top: -20px;
}
#border2{
width: 100%;
height: 1px;
background-color: #fff;
float: right;
margin-top: -20px;
}
#metaslider_container_27{
margin-top: 100px;
width: 980px;
}
#blog{
  width: 980px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0px 10px 0px;
}
.post{
  width: 300px;
  margin-top: 20px;
  margin-right: 40px;
  margin-bottom: 20px;
  margin-left: 0;
  float: left;
}
.post:last-child{
margin-right: 0px;
}
.entry{
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.entry img{
  position:absolute;
  clip:rect(0px,300px,300px,0px);
}
.thumb{
  width: 300px;
  margin-top: -12px;
  position: relative;
  background-color: rgba(255,255,255,0.7);
} 
.thumb p{
  font-size: 1em;
  line-height: 2em;
  text-align: center;
  color: #222;

}
#about{
  width: 100%;
  height: 300px;
  margin-top: 345px;

}
#cnt{
  padding-top: 15px;
  padding-left: 60px;
  width: 600px;
  float: left;
  font-size: 1.3em;
  line-height: 2em;
}
#profile{
  margin-top: 15px;
  margin-right: 60px;
  height: 200px;
  width: 200px;
  float: right;
}
#contact{
  background-color: #bababa;
  width: 100%;
  height: 500px;
  margin-top: 0;
}
.sidebar{
  float: left;
  width: 200px;
  margin: 20px 0 0 10px;
  font-size: 14px;
  list-style: none;
}

#footer{
  text-align: center;
  height: 50px;
  width: 100%;
  background: #ccc;
  color: #333;
  margin-top: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
}
#contact-deets{
  float: right;
  width: 260px;
  color: #555;
  font-size: 1.3em;
  line-height: 2em;
}
#contact-deets:hover{
  color: #333;
}
#contact-area {
  width: 600px;
  margin-top: 10px;
  float: left;
  margin-left: 0px;
}

#contact-area input, #contact-area textarea {
  padding: 5px;
  width: 471px;
  font-family: Helvetica, sans-serif;
  font-size: 1.4em;
  margin: 0px 0px 10px 0px;
  border: 2px solid #aaa;
  border-radius: 16px;
  float: left;
}

#contact-area textarea {
  height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
  border: 2px solid #444;
}

#contact-area input.submit-button {
  width: 100px;
  float: right;
}

label {
  float: left;
  text-align: right;
  margin-right: 15px;
  width: 100px;
  padding-top: 5px;
  font-size: 1.4em;
}
.menu{
  margin-top: 120px;
  width: 100%;
  background: #666;
  display:block;
  position:absolute;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
}


.menu li{
  padding-top: 10px;
  display: inline;
}
.menu a{
  display: inline-block;
  text-decoration:none;
  color:#fff;
  padding:0 30px 0px 0;
  font-family: 'Quicksand';
  font-size:18px;
  line-height: 100%;
}

.menu ul ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  float:left;
  z-index:99999;
  background: #212121;
}

.menu ul ul ul{
  top: 30%;
  left:100%;
  background: #343434;
}

.menu ul ul a{
  height:auto;
  line-height:1em;
  padding:10px;
  width:130px;
}

.menu li:hover > a,.menu ul ul:hover > a{
  color:#333;
}

.menu ul li:hover > ul{
  display:block;
}

@media only screen and (max-width: 980px){
  body{
    max-width: 980px;
    overflow-x: scroll;
  }
  #footer{
    width: 980px;
    max-width: 150%;
  }
  #footer p{
    margin-left: 33%;
  }
  .menu{
    width: 980px;
    margin-right: 0;
  }
  #contact{
    width:  980px;
  }
}
@media only screen and (min-width: 981px){
  .fix{
    margin-left: -50%;
  }
}

和 HTML：

<?php get_header(); ?>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <?php echo do_shortcode("[metaslider id=27]"); ?> 
  <div id="blog"> <h3>RECENT WORK</h3><div id="border"></div>
    <?php query_posts('showposts=3'); ?>
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

    <div class="post">
          <div id="1stp">

      <div class="entry">  
        <?php the_post_thumbnail();
        echo '<div class="thumb">' . '<p>' . get_post(get_post_thumbnail_id())->post_excerpt . '</p>' . '</div>'; ?>


      </div>
    </div>
    </div>

<?php endwhile; ?>

    <?php endif; ?>
  </div>

  <div id="about">
  <h3>BIO</h3><div id="border"></div>
    <div id="cnt"><?php
    $post_id = 38;
    $queried_post = get_post($post_id);
    echo $title;
    echo $queried_post->post_content;
    ?> 
    </div>
    <img id="profile" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSOyjuxygOjstEYLPtzJq4CJVGJu494MMmX3z7TBt5ss63WW_sXnw"/>
  </div>
  </div id="wrapper">
  </br>
  <div id="contact">
    <div id="wrapper2">
      <h3>CONTACT</h3><div id="border2"></div>
      </br>
      <div id="contact-area">

        <form method="post" action="contactengine.php">
          <label for="Name">name:</label>
          <input type="text" name="Name" id="Name" />

          <label for="City">city:</label>
          <input type="text" name="City" id="City" />

          <label for="Email">email:</label>
          <input type="text" name="Email" id="Email" />

          <label for="Message">message:</label><br />
          <textarea name="Message" rows="20" cols="20" id="Message"></textarea>

          <input type="submit" name="submit" value="Submit" class="submit-button" />
        </form>

        <div style="clear: both;"></div>

      </div>
      <div id="contact-deets">
        <?php
        $post_id = 53;
        $queried_post = get_post($post_id);
        echo $title;
        echo $queried_post->post_content;
        ?>
      </div>
    </div>
  </div>

<?php get_footer(); ?>
<?php wp_footer(); ?>
4

3 回答 3

2

我不确定，但看看你的 html 我猜问题是你在第一次打开它们时关闭了一些 div，尝试更改：

</div id="wrapper">

至

<div id="wrapper">

并检查以确保您没有在其他地方这样做过。

我还认为您在</div>html 末尾缺少最后一个关闭，<php get_footer(); ?>换句话说，您没有wrapper正确关闭 div。

于 2013-08-20T20:50:58.977 回答
0

您的 CSS 文件没问题，问题在于您的 html 标签。检查您是否准确地打开和关闭标签，并且关闭标签不得包含任何 id 或类，但似乎您已在关闭 div 中添加了包装类。

于 2013-08-20T21:01:51.890 回答
0

没有那个空间的一个简单的解决方案是给overflow:hidden你的身体，但是一个带有 jsfiddle 的例子，你的页面看起来会更有帮助。

于 2013-08-20T20:44:31.127 回答