Question

我的网站已经过css和html验证，但是在浏览器缩放对齐中断。我不是css亲。请告诉我需要更改哪些css代码。网站为here

这是标题栏上使用的图像的样式。

  #title {
    height : 90px;
    background : #f3f4f5;
    text-decoration : none;
    }
    #title > img.tp {
    float : right;
    }
    #title > img.redzone {
    padding-top : 1%;
    margin-left:15%;
    }
    #title > img.ctoc {
    float : left;
    }
    #title > img.fp {
    position:absolute;
    float:left;
    margin-left:6%;
    margin-top:10px;
    }

* 这是左右列的样式。 *

#contact_container {
position:absolute;
width : 15%;
margin-left:4.5%;
margin-top:30px;
float:left;
height : auto;
padding-top:2%;
background-image : url(img/transparent.jpg);
}
#contact_container > img
{
    padding-left:26%;
}
#content_container {
position:absolute;
padding-top : 2%;
margin-top:30px;
width : 15%;
float:right;
margin-left : 80%;
background-image : url(img/transparent.png);
text-align : center;
}
#content_container > hr
{
    width:80%;
    border-style:groove;
}
#contact_container > hr
{
    width:80%;
    border-style:groove;
}
#content_container > ul
{
    text-align:center;
}
#contact_container > ul
{
    text-align:center;
}

这些是菜单和滑块的常规样式

#gallery {
border : #ccc solid 1px;
background : #ffffff url(img/panel.jpg) repeat-x bottom center;
width : 920px;
overflow : hidden;
}
#menu2 {
list-style : none;
width : auto;
height : 43px;
background : #014464;
border : #002232 solid 1px;
margin-top : 30px;
margin-right : auto;
margin-bottom : 5px;
margin-left : auto;
padding-left : 30px;
}

赞赏任何形式的帮助甚至一些好的参考资料也会有所帮助

Answer 1

这不仅仅是变焦，这打破了。当浏览器宽度发生变化时，它也会中断。请参见此处的屏幕截图：http://imgur.com/OHiyQ

你有一个有趣的相对/绝对定位元素和一些浮点数的混合物。你最好的选择是去除那些不同的风格，在你的标记中以正确的顺序（从左到右）获取你的内容，然后从那里拿走它。

这是一个非常有用的流体宽度，三列CSS布局示例，看看它是如何完成的（并阅读附件），这将真正帮助您使布局正常运行。

http://www.maxdesign.com.au/articles/css-layouts/three-liquid/

祝你好运！

网站对齐打破浏览器缩放

1 个答案: