Fatal编程技术网
  • css/
  • CSS大师，初学者需要一些帮助：不能在3列布局中居中

CSS大师，初学者需要一些帮助：不能在3列布局中居中

css

CSS大师，初学者需要一些帮助：不能在3列布局中居中,css,Css,这里是HTML初学者 我已经智穷了，但我不能让它工作。你能看一下吗 我想要的是将navleft中的文本推到视口的最左侧，将navcenter的内容居中，并将navright的内容推到视口的最右侧 无论我做什么，navcenter的宽度只是它的内容，它不会填充navleft和navright之间的区域。我尝试了100万个CSS 3列选项，但没有任何效果—负边距、填充等 我无法摆脱包装器，因为它用于粘贴页脚，我遗漏了不相关的代码、正文条目等 我能做什么 玛丽亚 PS：是的，我知道我的CSS很差劲，对

这里是HTML初学者

我已经智穷了，但我不能让它工作。你能看一下吗

我想要的是将navleft中的文本推到视口的最左侧，将navcenter的内容居中，并将navright的内容推到视口的最右侧

无论我做什么，navcenter的宽度只是它的内容，它不会填充navleft和navright之间的区域。我尝试了100万个CSS 3列选项，但没有任何效果—负边距、填充等

我无法摆脱包装器，因为它用于粘贴页脚，我遗漏了不相关的代码、正文条目等

我能做什么

玛丽亚

PS：是的，我知道我的CSS很差劲，对你来说，它看起来就像一个大烂摊子，请原谅并容忍我。非常感谢您抽出时间

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<link href="2.css" rel="stylesheet" type="text/css" />


</head>
<body>

<div class="wrapper">
<div id="headerMain">
<div id="header">


<div class="headerLogoLeft"></div>
<div class="headerLogoCenter"></div>


<div id="nav">
<div id="navleft">navleft</div>
<div id="navcenter">center</div>
<div id="navright">navright</div>
</div>


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


</body>
</html>




/* CSS Document */

* { margin:0; padding:0; border:0; }


html {
 height:100%;
 width:100%;
}

.wrapper {
 min-height:100%;
 height:auto !important;
 margin:0 auto -26px;
 background:#e9e9e9; 
}

body{
 font: normal 12px/16px Arial, Verdana, Helvetica, sans-serif;
 height: 100%;
 min-width:1024px;
 width:100%;
 border: 0px;
 background-color:#CFCFCF;
}


#headerMain{
 width:100%;
 background:url(img/header_bg.png) 0 0 repeat-x;
 color:#D2C7A3;
}

#header{
 width:100%;
 background:url(img/header_bg_top.png) 0 0 repeat-x;
 margin:0;
 height:153px;
}


.headerLogoLeft {
  height:84px;
  width:34%;
  float:left;
  text-align:left;
}

.headerLogoLeft img  {
  height:72px;
  width:72px;
  display:inline;
  padding-top:5px;
}


.headerLogoCenter {
  height:84px;
  width:66%;
  float:left;
  text-align:left;
}

.headerLogoCenter img  {
  height:84px;
  width:550px;
  display:inline;
}



#nav {
 width:100%;
 height:33px;
 color: #9E9E9E;
 line-height:33px;
 font-size:13px;

}


#navleft {
 height:33px;
 float:left;
 width:200px;
 text-align:left;
}


#navcenter {
 height:33px;
 line-height:33px;
 text-align:right;
 float:left;


}

#navright {
 height:33px;
 width:200px;
 text-align:right;
  float: right;

}
如果您可以忽略ie6支持，那么您应该。。那么这就行了：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<style>
/* CSS Document */

* { margin:0; padding:0; }


html {
 height:100%;
 width:100%;
}

.wrapper {
 min-height:100%;
 height:auto !important;
 margin:0 auto -26px;
 background:#e9e9e9; 
}

body{
 font: normal 12px/16px Arial, Verdana, Helvetica, sans-serif;
 height: 100%;
 min-width:1024px;
 width:100%;
 border: 0px;
 background-color:#CFCFCF;
}


#headerMain{
 width:100%;
 background:url(img/header_bg.png) 0 0 repeat-x;
 color:#D2C7A3;
}

#header{
 width:100%;
 background:url(img/header_bg_top.png) 0 0 repeat-x;
 margin:0;
 height:153px;
}


.headerLogoLeft {
  height:84px;
  width:34%;
  float:left;
  text-align:left;
}

.headerLogoLeft img  {
  height:72px;
  width:72px;
  display:inline;
  padding-top:5px;
}


.headerLogoCenter {
  height:84px;
  width:66%;
  float:left;
  text-align:left;
}

.headerLogoCenter img  {
  height:84px;
  width:550px;
  display:inline;
}



#nav {
 width:100%;
 height:33px;
 color: #9E9E9E;
 line-height:33px;
 font-size:13px;
 position:relative;
}


#navleft {
 height:33px;
 float:left;
 width:200px;
 text-align:left;
 position:absolute;
 left:0; top:0;
 z-index:20;
 background:lightgreen;
}


#navcenter {
 height:33px;
 line-height:33px;
 text-align:center;
 position:absolute;
 left:0;right:0;top:0;
 padding-left:200px;
 padding-right:200px;
 z-index:10;
 background:yellow;
}

#navright {
 height:33px;
 width:200px;
 text-align:right;
 position:absolute;
 right:0;top:0;
 z-index:20;
 background:lightblue;
}
</style>

</head>

<body>


<div class="wrapper">
    <div id="headerMain">
        <div id="header">

            <div class="headerLogoLeft"></div>
            <div class="headerLogoCenter"></div>


            <div id="nav">
                <div id="navleft">navleft</div>
                <div id="navcenter">center</div>
                <div id="navright">navright</div>
            </div>


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





</body>
</html>
之后我就有了一个。这就是将导航条推到正确位置的原因吗，就在徽标之后？移除间隔符会将其移动到页面顶部。我也可以对上面的haderLogoLeft和HeaderLogoCenter使用绝对定位吗？是的，你也可以对页眉div使用绝对定位。在您的代码中，我认为问题在于最后一个右div向右浮动。将某个元素向右浮动是可以的，但是该div应该在html源代码中的第一个，然后是另一个向左浮动和非向右浮动的元素！先放右浮子，加宽度：100%；左边距：-200px；右边距：-200px；到中心柱修复了这个问题。我将阅读绝对定位。我真的很感谢你的帮助。我还不能投票，但当我获得足够的声誉时，我会来投票。祝你今天愉快！不用担心，玛丽亚。阅读这里的定位：你也可以不投票就接受我的答案，不是吗？