Question

你设计了一个网站，在普通浏览器中布局很好但是只要看一下黑莓手册，就会在右侧显示一个巨大的空白区域。同样在苹果设备上。这里是css代码，如果你想看看你是否可以看到http://u-zuki-designs.com/beta。谢谢你

`enter code here`/*
Theme Name:u-zuki-designs
Thema URL:www.u-zuki-designs.com
Author Name:u-zuki-designs.com
Version:1.0
*/

@charset "utf-8";

/*Juneral Tag Properties Initilization*/
*{
    padding:0px;
    margin:0px;
}

body{

}

a{
    color:#ffffff;
    text-decoration:none;
}

a:hover{
    text-decoration:none;
    color:#ffffff;
}

a img{
    border:0px;
    margin:0px;
}

ul li{
    list-style:none;
    padding:0px;
    margin:0px;
}

.clear{
    clear:both;
}

.leftside{
    float:left;
}

.rightside{
    float:right;
}

.main{
    width:100%;
    margin:0px auto;
}
/*Juneral Tag Properties Initilization*/

/*Header Starting*/
.header{
    width:100%;
    background:url(../images/header_bg.png) top left repeat-x;
}

.header_in{
    width:1000px;
    margin:0px auto;
    height:86px;
}

.header_menu{
    padding:35px 0px;
}

.header_menu ul li{
    float:left;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:lighter;
    padding:0px 6px;
}

.header_menu ul li a{
    font-size:12px;
    padding:4px 10px;
}

.header_menu ul li a.active{
    background:#252435;
}

.header_menu ul li a:hover{
    background:#252435;

}

/*Header Ending*/

/*Banner Starting*/
.banner{
    width:100%;
    background:url(../images/banner_bg.png) top left repeat-x;
}

.banner_in{
    width:1000px;
    margin:0px auto;
    height:395px;
}

.banner_in h1{
    font-family:Arial, Helvetica, sans-serif;
    color:#ffffff;
    text-align:center;
}

.banner_in .slider{
    width:655px;
    margin:0px auto;
}
/*Banner Ending*/

/*Content Starting*/
.content{
    width:100%;
    background:url(../images/content_bg.png) top left repeat-x;
    min-height:542px;
}

.content_in{
    margin:0px auto;
    width:1000px;
}


.category{
    border-bottom:1px solid #efefef;    
}

.category_in{
    width:210px;
    margin:0px auto;
}

.category_in ul li{
    float:left;
    padding:0px 3px;
}

.new_work{
    padding-left:90px;
}

.new_work .section_title h2{
    font-family:"Gotham Medium";
    font-weight:lighter;
    font-size:18px;
}

.new_work .section_title a{
    color:#6dc6b6;
    font-family:"Gotham Medium";
    font-size:10px;
    padding:0px 150px 0px 100px;
}

.new_work .website{
    color:#959595;
    font-family:"Gotham Medium";
    font-size:12px;
}

.new_work .identity{
    color:#959595;
    font-family:"Gotham Medium";
    font-size:12px;
}

.new_work .photography{
    color:#959595;
    font-family:"Gotham Medium";
    font-size:10px;
}

.new_work .website p,
.new_work .identity p,
.new_work .photography p{
    font-size:10px;
}

.new_work .website p span,
.new_work .identity p span,
.new_work .photography p span{
    color:#2eae96;
}

.new_work .website,
.new_work .identity,
.new_work .photography{
    width:150px;
    padding:0px 10px;
}

.time_sep{
    font-size:10px;
    color:#b6b6b6;
    margin-left:100px;
}

.feature_icon_set{
    padding-left:130px;
}

.section_title_2 h3{
    font-family:"Gotham Medium";
    font-size:10px;
}

.section_title_2{
    padding-right:110px;
}

a.iconset{
    color:#42b4a1;
    font-family:"Gotham Medium";
    font-size:10px;
}

.icon_set_display{
    background-color:#ffffff;
    height:175px;
    width:544px;
}

/*Content Ending*/

/*Footer Starting*/
.footer{
    width:100%;
    background-color:#e3e3e3;
}

.footer_in{
    width:1000px;
    margin:0px auto;
    padding-left:200px;
}

.top_footer{

}

.top_footer .aboutus{
    padding:25px;
    width:150px;
    font-family:"Gotham Medium";
    font-size:12px;
    color:#9f9fa2;
}

.top_footer .facebookupdate{
    padding:25px;
}

.top_footer .recent_work{
    padding:25px;
}

.top_footer .recent_work img{
    padding:3px;
}

.top_footer .aboutus h4,
.top_footer .facebookupdate h4,
.top_footer .recent_work h4{
    font-family:"Gotham Medium";
    font-size:16px;
    font-weight:normal;
    color:#777777;
}

.bottom_footer{
    padding-left:25px;
}

.bottom_footer ul li{
    float:left;
    color:#ccccce;
    font-family:"Gotham Medium";
    padding:5px 3px;
}

.bottom_footer ul li a{
    color:#6e6e6e;
    font-family:"Gotham Medium";
    font-size:10px;
}
/*Footer Ending*/

/*Font Initilization Starting*/

/*Font Initilization Ending*/

html code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>U-Zuki-Designs | The Secrect To Creativity</title>
</head>
<body>
<!--Code Starting-->
<div class="main">
  <!--Header Starting-->
  <div class="header">
    <div class="header_in">
      <div class="logo leftside">
        <a href="index.html"><img src="images/logo1.png" alt=" " /></a>
     <a href="index.html"><img src="images/logo2.png" alt=" " /></a>
      </div>
      <div class="header_menu rightside">
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Services</a></li>
      <li><a href="#">Contact Us</a></li>
        </ul>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <!--Header Ending-->
  <!--Banner Starting-->
  <div class="banner">
    <div class="banner_in"> 
      <br />
      <h1>Welcome To Our Website</h1>
      <br />
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
        <!--<img src="images/banner_image.png" alt=" " />-->

                <div id="wrapper">

                <div id="slider-wrapper">

                    <div id="slider" class="nivoSlider">
                        <img src="images/C.jpg" alt="" />
                        <img src="images/b.jpg" alt=""/>
                        <img src="images/ab.jpg" alt="" />
                        <img src="images/D.jpg" alt="" />
                    </div>
                    <!--<div id="htmlcaption" class="nivo-html-caption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
                    </div>-->

                </div>

            </div>



      </div>
    </div>
  </div>
  <!--Banner Ending-->
  <!--Content Starting-->
  <div class="content">
    <div class="content_in">
      <br />
      <div class="category">
        <div class="category_in">
          <!--<ul>
            <li><a href="#"><img src="images/all.png" alt="" /></a></li>
            <li><a href="#"><img src="images/news.png" alt="" /></a></li>
            <li><a href="#"><img src="images/art.png" alt="" /></a></li>
            <li><a href="#"><img src="images/web.png" alt="" /></a></li>
            <li><a href="#"><img src="images/print.png" alt="" /></a></li>
            <li><a href="#"><img src="images/illustration.png" alt="" /></a></li>
          </ul>
          <div class="clear"></div>
          <br />-->
        </div>
        </div>
      <br />
      <div class="new_work">
            <div class="section_title leftside">
              <h2>New Work</h2>
              <br />
              <br />
              <a href="#"><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;> View all illustrations</h4></a>
            </div>
            <div class="website leftside">
              <span>Website</span><br />
              <img src="images/website.png" alt=" " />
              <p>Lorem Ipsum is simply dummy text of<span>typesetting industry.</span></p>
            </div>
            <div class="identity leftside">
              <span>Idenitity</span><br />
              <img src="images/identity.png" alt=" " />
              <p>Lorem Ipsum is simply dummy text of<span>typesetting industry.</span></p>
            </div>
            <div class="photography leftside">
              <span>Photography</span><br />
              <img src="images/photography.png" alt=" " />
              <p>Lorem Ipsum is simply dummy text of<span>typesetting industry.</span></p>
            </div>
            <div class="clear"></div>
        </div>
        <br />
        <div class="time_sep">
          12.09.2011<img src="images/sep_date.png" alt=" " />
        </div>
        <br />
        <div class="feature_icon_set">
          <div class="section_title_2 leftside">
            <h3>FEATURE: ICON SET</h3>
            <br />  
            <br /> 
            <br />   
            <a href="#" class="iconset">> View full datalis</a>
          </div>
          <div class="icon_set_display leftside">
        <h2><p><b>Our Work</b></p></h2> 
        <br>Welcome to our online graphic design & Photography portfolio. we hope you will see the quality of the our creaitivity we produce and maybe get a understanding of our passion for what we do to add smiles to our clients faces</br>



          </div>
          <div class="clear"></div>
          <br />
          <img src="images/sep2.png" alt=" " />
        </div>
    </div>
  </div>
  <!--Content Ending-->
  <!--Footer Starting-->
  <div class="footer">
    <div class="footer_in">
      <div class="top_footer">
        <div class="aboutus leftside">
          <h4>Our Work</h4>
          <p><br>Our work with our clients is to explore, architect, rebuild, revise, revisit, rebrand, rewrite, rearchitect, and we do it all from start to finish...</br></p>
        </div>
        <div class="facebookupdate leftside">
          <h4>facebook updates</h4>
        </div>
        <div class="recent_work leftside">
          <h4 style="padding-left:3px;">recent works</h4>
          <img src="images/recent1.png" alt=" " class="leftside"/>
          <img src="images/recent2.png" alt=" " class="leftside"/>
          <img src="images/recent3.png" alt=" " class="leftside"/>
          <div class="clear"></div>
          <img src="images/recent4.png" alt=" " class="leftside"/>
          <img src="images/recent5.png" alt=" " class="leftside"/>
          <img src="images/recent6.png" alt=" " class="leftside"/>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <img src="images/footersep.png" alt=" " style="padding-left:25px;"/>
      </div>
      <div class="bottom_footer">
        <ul>
          <li><a href="#">HOME</a></li>
          <li>/</li>
          <li><a href="#">ABOUT</a></li>
          <li>/</li>
          <li><a href="#">FAQ</a></li>
          <li>/</li>
          <li><a href="#">TERMS</a></li>
          <li>/</li>
          <li><a href="#">CONTACT</a></li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <!--Footer Ending-->
</div>
<!--Code Ending-->

    <script type="text/javascript" src="nivo-slider/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="nivo-slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({});
    });
    </script>
</body>
</html>

Answer 1

我的猜测是由于标题图形和信息的宽度。如果你压缩你的浏览器窗口，你会收到（我假设的是）相同的空白区域，因为标题内容向右延伸到更远的位置。在不能显示整个宽度的移动环境中，也会被拉伸并呈现出白色空间。

我知道这不是解决办法，但我认为这就是你所看到的空白背后的原因。

Answer 2

尝试从css下面删除宽度

.footer_in{
    /*width:1000px;*/
    margin:0px auto;
    padding-left:200px;
}

未删除宽屏幕截图：

enter image description here

从.footer_in屏幕截图中移除宽度：没有水平滚动条。

enter image description here

在网站白色空间右边片剂的布局

2 个答案: