网站右侧的大空白

Question

我正在建立我的第一个网站。 考虑到这是我的尝试，它的运行情况还算不错，但是页面右侧有大量空白，并且不知道如何纠正。

以下是一些HTML：

<head>

<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>:Music Hound Dundee:</title>
<meta name="description" content="This is the Music Hound Dundee website by Group 24.">
<meta name="keywords" content="music, gigs, dundee">

<meta http-equiv="cleartype" content="on">

<!-- Responsive and mobile friendly stuff -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/6cols.css" media="all">

<style type="text/css">


}

</style>
<style>
     /* Begin Navigation Bar Styling */
 #nav {
  width: 100%;
  height: 100%;
  display:inline-block;
   text-align: center;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 0px solid #ccc; 
  border-top: 0px solid #ccc; }
#nav li {
  display:inline-block; }
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
   font-family: sans-serif;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc; }
#nav li a:hover {
  color: FFFFFF;
  background-color: #FC359A; }

  #section1 {
width:500px;
display:inline-block;
padding:10px;        
}

  #section2 {
width:500px;
display:inline-block;
padding:0px;         
}
/* End navigation bar styling. */
</style>
<style>
p {
color: white;
font-size: 20px;
font-family; sans-serif;
background-color: rgba(0, 0, 0, 0.7);
}

hr {
margin-top: 4px;
margin-bottom: 1px;
}
</style>
</head>

<body padding:0; margin:0; bgcolor = "#051525", border = "0">

<div id="wrapper">
<div id="headcontainer">
    <header>
    <img src="BlueBanner.PNG" width="100%" height="100%" >
    </header>
</div>
<div id="maincontentcontainer">

    <div class="standardcontainer" id="example">
        </div>
<ul id="nav">
  <li><a href="file:///F:/University/www_Authoring/Group24_website/index.html">Home</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html">Gig News</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/Venues.html">Venues</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/FAQ.html">FAQ's</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/Promotions.html">Band Promotion</a></li>
  <li><a href="file:///F:/University/www_Authoring/Group24_website/About.html">About</a></li>
</ul>
    <br></br>
        <div class="image">
            <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html"><img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;" alt="The View"></a>

所有的CSS：

/*  GRID OF SIX   ============================================================================= 

*/

.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 83.06%;
}

.span_4_of_6 {
    width: 66.13%;
}

.span_3_of_6 {
    width: 49.2%;
}

.span_2_of_6 {
    width: 32.26%;
}

.span_1_of_6 {
    width: 15.33%;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.image2 { 
   position: absolute; 
   width: 100%; /* for IE 6 */
   top: 820px; 
   left: 690px; 
   width: 100%;
}

.image3 { 
   position: absolute; 
   width: 100%; /* for IE 6 */
   top: 820px; 
   left: 100px; 
   width: 100%;
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h2 span.spacer {
   padding:0 5px;
}

h3 { 
   position: absolute;
   top: 174px; 
   left: 746px; 
   width: 100%; 
}

h3 span { 
   color: white; 
   font: bold 15px/35px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h3 span.spacer {
   padding:0 5px;
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_6_of_6 {
        width: 100%; 
    }
    .span_5_of_6 {
        width: 100%; 
    }
    .span_4_of_6 {
        width: 100%; 
    }
    .span_3_of_6 {
        width: 100%; 
    }
    .span_2_of_6 {
        width: 100%; 
    }
    .span_1_of_6 {
        width: 100%; 
    }

   p {
       border-style: outset;
       border-width: thick;
       border-color: white;
       padding: 4px;
       text-align: left;
   }
    }

Answer 1

首先，我看到了很多复制粘贴的代码片段，请尝试获取所有代码：

<style> ... </style>

一起拥有更清晰的代码。

其次，我做了一个小提琴： http : //jsfiddle.net/6b3mpx53/尝试复制您的错误，但是我看不到您告诉我们的空白。

您能否给我们更多信息。

另一件事：尝试关闭标签，例如：

<img ... />

问候

Answer 2

截断的HTML很难分辨出来，但是看起来放在<img>标记上的样式应该在.image类（ <div class="image"> ）上。 更新的演示

原版的：

    <div class="image">
        <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html">
             <img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;" alt="The View">
        </a>
    </div>

已更改：

   <div class="image" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em; margin-top: 0em;">
        <a href="file:///F:/University/www_Authoring/Group24_website/GigNews.html">
             <img src="the-view.jpg" alt="The View">
        </a>
    </div>

网站右侧的大空白

问题描述

2 个解决方案

解决方案1
1 2014-10-30 18:53:42

解决方案2
1 2014-10-30 18:57:05

网站右侧的大空白

问题描述

2 个解决方案

解决方案1 1 2014-10-30 18:53:42

解决方案2 1 2014-10-30 18:57:05

解决方案1
1 2014-10-30 18:53:42

解决方案2
1 2014-10-30 18:57:05