我刚刚完成个人投资组合网站的第一页。在网络开发方面，我只是一个初学者。我已将网站的宽度设置为 1600 像素，与背景图片的宽度相同。
我现在想做的是将页面转换为响应式设计。我唯一的问题是，当我将页面宽度更改为 100% 时，横幅 div 的位置向左移动，而不是居中。
这是我的代码片段。
<body>
<div id="banner">
<div class="container_12">
<div class="grid_7 prefix_5" id="navbar">
<ul>
<li><a href="index.html" title="Gelo Lopez">Home</a></li>
<li><a href="Project Management.html" title="Gelo Lopez Work" target="_blank">Portfolio</a></li>
<li><a href="http://gelolopez.wordpress.com">Blog</a></li>
<li><a href="/contact" title="Contact Gelo Lopez">Contact</a></li>
</ul>
</div>
<div class="grid_10" id="bannertext">
<h1>Hello!</h1>
<div class="clear"></div>
<p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</>
<p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p>
</div>
</div>
</div><!--end of banner-->
CSS:
body {
width: 100%;
color: #5a5959;
font-size: 18px;
font-family: "Lao UI";
}
/* sections*/
#banner {
background-image: url(../Images/Banner-background.png);
height:660px;
color: #fff;
font-size: 24px;
}
我还在为 12 列使用 960 gs 模板。我决定将 container_12 div 放在 id=banner 下，以便将内容放在页面中央。
我希望有人能帮助我
最佳答案
我认为您的意思是背景图像被向右截断，而不是横幅 div 被“向右移动”。 <div>因为 block 级元素将适合它的父元素，在这种情况下它是 body设置为 100% 宽度。
如果您喜欢使用 CSS3，请尝试添加 background-size: contain至 #banner这会将您的背景图像缩放到内容区域。
更多信息在这里:http://www.w3schools.com/cssref/css3_pr_background-size.asp
JSFiddle 在这里:http://jsfiddle.net/davidpauljunior/LCFun/
关于html - 转换为响应式网页设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19761672/