Question

我有这2页

http://slacklog.heroku.com/
http://slacklog.heroku.com/signup/date

Na，你可以看到两者都有顶部和中部，底部和中间图像的间隙......

这是我的HTML

<div class="content" align="center">
<div class="slacklog_log"></div>
<div class="main_column_section">
    <div class="wide_box_top"></div>
    <div class="wide_box_body" id="main_content_body">  
        <div id="white">
            <div class="wide_box_top_white"></div>
            <div class="wide_box_body_white">   
            <!-- unique per page -->
            <!-- stuff -->
            </div>
            <div class="wide_box_bottom_white"></div>
        </div>
    </div>          
    <div class="wide_box_bottom"></div>
</div>
</div><!--content-->

如果还有什么我可以帮你帮助我......顺便说一下。我寻找填充物或边缘，我在萤火虫中根本没有看到它...提前感谢

Answer 1

我已成功通过应用以下样式来修复它：

#white {
  width: 650px;
  margin: 0 auto;
}

.wide_box_top_white {
  background: url("/images/white_top.png") no-repeat scroll 0 0 transparent;
  height: 9px;
  float: left;
  width: 650px;
  display: block;
}

.wide_box_body_white {
  background: url("/images/white_middle.png") repeat-y scroll 0 0 transparent;
  float: left;
  width: 650px;
  display: block;
}

.wide_box_bottom_white {
  background: url("/images/white_bottom.png") no-repeat scroll 0 0 transparent;
  height: 10px;
  float: left;
  display: block;
  width: 650px;
}

请注意，您不需要所有这些添加的样式，但它们不会对其造成伤害。我主要将 float：left ， width：650px 和 display：block 添加到#white div ....中的类中。 p>

你可以做更多的事情来改善一般结构。例如，我真的不建议使用图像来实现你在.wide_box_body_white类中的白色背景，并且最好摆脱.wide_box_bottom_white和.wide_box_top_white类，然后只给.wide_box_body_white一个border-radius。 ...

Answer 2

根据stephenmurdoch的建议，您可以从wide_box_top_white，wide_box_body_white和wide_box_bottom_white中删除图片，并将此样式添加到您的#white div

#white {
    background-color: white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -o-border-radius: 12px;
    -ms-border-radius: 12px;
    -khtml-border-radius: 12px;
    -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.3);
}

Answer 3

这是因为你没有重置margin属性。你有顶部h1日期/ h1有边缘顶部设置，在底部你有p结束日期/ p有边缘底部设置。如果你把它们设为0，那就可以了。

你说你用萤火虫检查了它，但我相信你没有检查.content h1和p：）

为什么顶部和中部切片存在间隙

3 个答案: