当前位置： 文江博客话题详情

制作一个包含 3 个 div 的网站，其中包含中心内容和 2 个“缓冲区”填充重新挖掘的水平空间

发布于 2024-10-03 12:15:14 字数 1339 浏览 13 评论 0原文

我正在制作一个 CSS 网站，我希望看起来像这样： 3 个垂直分区。 左中右。 center div 是网站内容，我希望 left 和 right div 填充中心和浏览器边框之间的空间。

这是我的代码。

    #container
{
 width:100%;
 background-color:#000;
}
.center
{
 width:1000px;
 height:400px;
 background-color:#F90;
 margin: 0px auto;
 overflow: auto;
}
.spacer-left
{ 
 width:100%;
 height:400px;
 background-color:#F90;
 float:left;
}
.spacer-right
{ width:100%;
 height:400px;
 background-color:#F90;
}

这是 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>

我尝试使用 2 个 div，没有问题。左侧为浮动：左侧和宽度（以像素为单位），右侧为 100% 宽度，不带浮动。它起作用了。但是如何用 3 个 div 来制作呢？提前致谢！

原文

I am making a css site and I want to look like that:
3 vertical divs. LEFT CENTER RIGHT. In the center div is the site content, and I want the left and right div to fill the space between the center and the browser borders.

Here is my code.

    #container
{
 width:100%;
 background-color:#000;
}
.center
{
 width:1000px;
 height:400px;
 background-color:#F90;
 margin: 0px auto;
 overflow: auto;
}
.spacer-left
{ 
 width:100%;
 height:400px;
 background-color:#F90;
 float:left;
}
.spacer-right
{ width:100%;
 height:400px;
 background-color:#F90;
}

And here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>

I've try with 2 divs and there was no problem. The left with float:left and width in pixels and right one with 100% width without float. It worked. But how to make it with 3 divs. Thanks in advance!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

鸠魁 2024-10-10 12:15:14

感谢塞巴斯蒂安的帮助，但我找到了其他方法。
这就是代码现在的样子和它的工作原理。

#container
{
    width:1000px;
    background-color:#000;
    margin:0 auto;
}
.center
{
    width:100%;
    height:400px;
    background-color:#F90;
    margin: 0px auto;
    overflow: auto;
}
.spacer
{   
    width:50%;
    height:400px;
    background-color:#F90;
    float:left;
}
.head_warp
{
    width:100%;
    display:block;
    height:400px;
    margin:0 auto;
    padding:0;
    position:absolute;
    top: 0;
    left: 0;
    text-align:center;
    z-index:-9999;
}

和 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>

再次感谢您的帮助。如果我的解决方案有问题，我会再次写在这里。

Thank you for the help Sebastian but I figured out other way.
This is how the code looks now and it works.

#container
{
    width:1000px;
    background-color:#000;
    margin:0 auto;
}
.center
{
    width:100%;
    height:400px;
    background-color:#F90;
    margin: 0px auto;
    overflow: auto;
}
.spacer
{   
    width:50%;
    height:400px;
    background-color:#F90;
    float:left;
}
.head_warp
{
    width:100%;
    display:block;
    height:400px;
    margin:0 auto;
    padding:0;
    position:absolute;
    top: 0;
    left: 0;
    text-align:center;
    z-index:-9999;
}

and the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>

Thank you for the help one again. I will write here again if there is a problem with my solution.

回复 原文
送君千里 2024-10-10 12:15:14

更新：使用三个 div 和 z-index 来替代下面的答案。

http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/

如果您想一个内容位于中心 div 的网站，您可以简单地使用以下方式复制该布局：

<body>
  <div class="center">center</div>
</body>

使用 css：

html {height: 100%;   }
.center { width:750px; margin: 30px auto; height: 100%; }

在这里使用它： http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/

来自类名 .spacer_left 和 .spacer_right 我假设这些 div 是空间隔符并且没有必要。

这是基本 css 布局的一个很好的资源： http://www.csseasy.com/

Update: a different alternative to the answer below, using three divs and z-index.

http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/

if you are trying to make a site with the content in the center div, you can replicate that layout using simply:

<body>
  <div class="center">center</div>
</body>

with the css:

html {height: 100%;   }
.center { width:750px; margin: 30px auto; height: 100%; }

play with it here: http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/

from the class names .spacer_left and .spacer_right i'm assuming that those divs are empty spacers and not necessary.

this is a good resource for base css layouts: http://www.csseasy.com/

回复 原文
~没有更多了~

关于作者

流心雨

暂无简介

0 文章
0 评论
302 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苍风燃霜

文章 0 评论 0

我的黑色迷你裙

文章 0 评论 0

悸初

文章 0 评论 0

撧情箌佬

文章 0 评论 0

森罗

文章 0 评论 0

lyn1245

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文