gpt4 book ai didi

CSS 大师,初学者需要一点帮助 : Can't center middle column on 3-col layout

转载 作者:行者123 更新时间:2023-11-28 14:56:06 27 4
gpt4 key购买 nike

这里是 HTML 初学者。

我已经无计可施了,但还是无法正常工作。你能看看吗?

我想要的是将 navleft 中的文本推到 hte 视口(viewport)的最左侧,将 navcenter 的内容居中并将 navright 的内容推到视口(viewport)的最右侧。

无论我做什么,navcenter 的宽度只是它的内容,它不会填充 navleft 和 navright 之间的区域。我尝试了 100 万个 CSS 3 列选项但无济于事(负边距、填充等)。

我无法摆脱包装器,因为它用于 sticyk 页脚(我遗漏了不相关的代码、正文条目等)。

我能做什么?

玛丽亚

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>

关于CSS 大师,初学者需要一点帮助 : Can't center middle column on 3-col layout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3585785/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com