Fluid CSS布局问题
Fluid CSS布局问题
提问于 2011-06-29 22:33:14
我正在为一部正在发行的电影设计一个网站，但我在让它适合所有浏览器窗口大小和屏幕大小方面遇到了一些问题。本质上，例如用于启动页面的标记在页面的顶部具有电影徽标，在其下面具有视频(电影预告片)，然后是将用户带到主页的enter按钮。所有这些都应该以所有浏览器窗口大小为中心。但是，当我尝试不同大小的内容时，内容不会居中，并且视频会偏离其背景图像。我该如何用CSS解决这个问题呢？
还有一些其他页面，即提要，视频，然后是一个页面捐赠给该项目。我希望这些都能以相同的方式工作，保持内容在所有大小上都能正常工作。谢谢!
如果你想看看这个，明白我的意思，这个链接是http://rescuedthemovie.com/new/home。这是开发页面，基本上没有最终的设计，所以它有点混乱，但你可以看到我在说什么。
jwinton
回答 3
Stack Overflow用户
发布于 2011-06-29 22:56:15
听起来像是你在页面上放置元素的方式有问题。看一下：
http://www.w3schools.com/css/css_positioning.asp
Stack Overflow用户
发布于 2011-06-30 01:14:49
只需将此代码添加到您希望居中的任何div中。这应该适用于所有浏览器，并且将保持所有内容居中，无论分辨率如何。
#div {
margin:0 auto;
text-align:center;
}我建议将其用于主内容div，以便所有内容都居中，然后为视频、链接等创建单独的div。这样您就可以在居中的div中将它们放置在您想要的位置。
Stack Overflow用户
发布于 2011-06-30 02:22:11
我不明白你的设计。我看到了以下问题。
，
- ，你有一个
div id="container"，但它唯一包含的就是div id="fotter"。所有其余的元素都在容器div的“外部”。 - 您有一个样式为
margin-top: 1%; margin-left: 25%;的div id="logo"。这将如何使其居中？ - Your
div id="slider"有position: relative; left: 26%; top: 3em;，这意味着它从原来的位置向左推了26%，从顶部推了3em，并在以前的位置留下了一个“间隙”。 - 你的
h1有一个margin: left; 300px;。你到底想让它在哪里be? - Underneeth
h1，你有包含div元素的a元素吗？这就像是内联元素中的块级元素。完全错了。所有这些a元素都应该在div中，而div应该在div#container中，div#footer在div#container中。div#foooter的样式是position: absolute，而div#container不是，的样式是position: relative。这导致了两件事。div#container会折叠，因为它没有任何内容，并且div#fotter是相对于浏览器窗口定位的。 - 您有3个
div#recent。ID必须是唯一的。这是不允许的。使用已安装的
。calss.
我将给出一个关于如何去做的skeloton。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<a href="http://rescuedthemovie.com"><img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" /> </a>
</div>
<div id="nav">
<ul>
<li><a href="http://rescuedthemovie.com/home.html">home</a></li>
<li><a href="http://rescuedthemovie.com/synopsis.html">synpsis</a></li>
<li><a href="http://rescuedthemovie.com/videos.html">videos</a></li>
<li><a href="http://rescuedthemovie.com/blog.html">blog</a></li>
<li><a href="http://rescuedthemovie.com/partner.html">partner</a></li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
<a href="http://rescuedthemovie.com/blog">My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
<a href="http://rescuedthemovie.com/blog">I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
<a href="http://rescuedthemovie.com/blog">When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...</a>
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html> THE CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}这个偏置是固定宽度的布局。但您可以很容易地将其更改为fluid或estalic。这是它看起来的样子
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6522416
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号