Fatal编程技术网
  • html/
  • Html 我的居中布局&x201C；翻转”；当我更改页面时，向左移动几个像素！！如何解决这个问题？

Html 我的居中布局&x201C；翻转”；当我更改页面时，向左移动几个像素！！如何解决这个问题？

html css

Html 我的居中布局&x201C；翻转”；当我更改页面时，向左移动几个像素！！如何解决这个问题？,html,css,centering,Html,Css,Centering,我根据内嵌显示的div为信息图做了一个非常简单的布局。它居中，每页的高度不同，但页面的结构是相同的，唯一改变的是图像内容。每个页面的宽度都是相同的，即680px，元素总是相同的，总是在相同的位置。我不知道为什么页面会翻转，就好像容器DIV的边距在页面之间发生了变化 如图所示： 以下是基本布局： 如果有人能帮我，我会很高兴的 这是CSS： body { margin:0; padding:0; text-align:center; background: #F

我根据内嵌显示的div为信息图做了一个非常简单的布局。它居中，每页的高度不同，但页面的结构是相同的，唯一改变的是图像内容。每个页面的宽度都是相同的，即680px，元素总是相同的，总是在相同的位置。我不知道为什么页面会翻转，就好像容器DIV的边距在页面之间发生了变化

如图所示：

以下是基本布局：

如果有人能帮我，我会很高兴的

这是CSS：

body {
    margin:0;
    padding:0;
    text-align:center; 
    background: #FFF;
}

a img {
    border: none;
}


#container {
    width: 680px;
    margin:0 auto;          
    text-align:left;
    margin-left: auto;
    margin-left: auto;
}

#box_menu {
    width: 680px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
}

#mspace01 {
    width: 96px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #FFF;
}

#mspace02 {
    width: 9px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #FFF;
}

#mspace03 {
    width: 144px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #FFF;
}

#bt01 {
    width: 124px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #62BD80;
}

#bt02 {
    width: 107px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #1083D2;
}

#bt03 {
    width: 91px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #F36851;
}

#bt04 {
    width: 91px;
    height: 37px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
    background: #F68B1F;
}

#box_info{
    width: 680px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
}

#box_conteudo{
    width: 600px;
    display: inline;
    float: left;
    margin: 0px;
    padding: 0px;
}

#vvbt{
    width: 40px;
    height: 40px;
    display: inline;
    float: left;
    padding: 0px;
    margin-top: 53px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background: #FFF;

}
这是HTML结构：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Título</title>

<link type="text/css" media="all" href="CSS.css" rel="stylesheet" />

</head>



<!--==============================================
Início do Body
============================================== -->
<body>
<!-- Início do Container -->
<div id="container">

    <!-- Início do Menu --> 
    <div id="box_menu">

      <div id="mspace01"></div>

          <div id="bt01"><img src="imgs/bt_01.jpg" width="124" height="37" /></div>

          <div id="mspace02"></div>

          <div id="bt02"><a href="page_02.html" target="_self"><img src="imgs/bt_02.jpg" width="107" height="37" /></a></div>

          <div id="mspace02"></div>

          <div id="bt03"><a href="page_03.html" target="_self"><img src="imgs/bt_03.jpg" width="91" height="37" /></a></div>

          <div id="mspace02"></div>

          <div id="bt04"><a href="page_04.html" target="_self"><img src="imgs/bt_04.jpg" width="91" height="37" /></a></div>

          <div id="mspace03"></div>

     </div>
     <!-- Fim do Menu --> 

     <!-- Início do Infográfico -->
     <div id="box_info">


          <!-- Início do VV BT 01 -->

          <div id="vvbt"></div>

          <!-- Fim do VV BT 01 -->





          <!-- Início do Box Conteudo -->
          <div id="box_conteudo">

               <img src="imgs/conteudo_01.jpg" width="600" height="1011" />

          </div>
          <!-- Início do Box Conteudo -->





          <!-- Início do VV BT 02 -->

          <div id="vvbt"><a href="page_02.html" target="_self"><img src="imgs/vai.jpg" width="40" height="40" /></a></div>

          <!-- Fim do VV BT 02 -->


     </div>
     <!-- Fim do Infográfico --> 

</div>
<!-- Fim do Container -->
</body>
<!--==============================================
Fim do Body
============================================== -->



</html>


蒂图罗
CSS

html{
  min-height:101%;
}
你的链接对我来说很好。这几乎肯定是由浏览器滚动条的开关引起的。i、 e.当您的
#box conteudo
容器高于浏览器的高度时，会出现垂直滚动条，从而将容器推入一个稍小的区域。尝试为您的
#框上下文指定至少与浏览器高度相同的最小高度
 浏览器有一个滚动条而没有另一个吗？很有趣，一个滚动条占用了多少空间，你不觉得吗？哈哈…那个该死的滚动条…@dwhite.me是的，在两个页面中，高度不够大，无法启动滚动条。如果是滚动条，请将CSS设置为html{min height:101%；}，这应该可以解决问题。谢谢，问题确实出在最小高度上。但我还是按照@dwhite.me告诉我的去做了，而且成功了。它是在html上，而不是在#box conteudo上。非常感谢你的回答=没问题，祝你好运！