`Fiddle`

Question

这是我第一次尝试从头开始创建一个自定义html页面而且我遇到了一些麻烦：

这基本上是我想要的：

enter image description here

我希望网站根据窗口大小自动调整大小 - 第一个div bg应该是全宽，其内部应该是固定宽度（居中）

我首先尝试手动创建每个div - 看起来好了，除了标题内的内部div我想要居中

我在css / html中真的很棒，所以如果有任何方法可以改进我的代码 - 请告诉我

我尝试了几种方法，但一直卡住。

尝试：

我使用上面作为例子，但我一直卡住所以我决定从零开始

CSS

#body_wrapper {
    width:100%;
    background:white;
}
#header {
    width:100%;
    height:200px;
    background:red;
}
#header_inside {
    width:500px;
    height:180px;
    background:green;
}
#content {
    width:100%;
    height:600px;
    background:blue;
}
#footer {
    width:100%;
    height:200px;
    background:yellow;
}

HTML

<body>
    <div id="body_wrapper">
        <div id="header">
            <div id="header_inside"></div>
        </div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

Answer 1

要使div居中，请使用：margin:auto;。所以;

#header_inside {
   margin: auto;
   [ ... ]
}

Answer 2

更改标题的css，如下所示：

#header {
box-sizing: border-box;
padding: 10px 0;
width: 100%;
height: 200px;
background: red;
}
#header_inside {
margin: 0px auto;
width: 500px;
height: 180px;
background: green;
}

Answer 3

如果响应和调整大小是你的priorty尝试Twitter Bootstrap Css。它在预定义类本身的帮助下非常适用于响应功能。

Answer 4

我希望这就是你想要的东西::

http://jsfiddle.net/rahulrulez/b4gWx/

只需将以下属性添加到内部div ..我已遵循HTML5约定，我建议您这样做。

width:500px;
margin:0 auto;

熟悉HTML和CSS之后......我建议你用Twitter Bootstrap或Zurb Foundation等框架开始开发

Answer 5

margin: auto解决方案应该有效。

您也可以使用text-align：

.outerDiv {
    width: 100%;
    text-align: center;
}

.innerDiv {
    width: 500px;
    text-align: left;
}

Answer 6

<强> HTML

<div id="wrapper">
    <div id="header">
        <div id="logo"></div>
    </div>
    <div id="menu">
        <div id="menuitems"></div>
    </div>
    <div id="content">
        <div id="contents"></div>
    </div>
    <div id="footer">
        <div id="footers"></div>
    </div>
</div>

<强> CSS

* {
    margin:0px;
    padding:0px;
}
#wrapper {
    width:100%;
    border:1px solid black;
    height:1000px;
}
body {
    width:100%;
    border:1px solid black;
    height:1000px
}
#header {
    width:100%;
    height:100px;
    border:1px solid red;
    display:block;
}
#logo {
    width:50%;
    margin:5px auto;
    border:1px solid red;
    height:50px;
    display:block;
}
#menu {
    width:100%;
    height:30px;
    border:1px solid blue;
    display:block;
}
#menuitems {
    width:50%;
    margin:5px auto;
    border:1px solid blue;
    height:15px;
    display:block;
}

#content {
    width:100%;
    height:800px;
    border:1px solid green;
    display:block;
}
#contents {
    width:50%;
    margin:15px auto;
    border:1px solid green;
    height:650px;
    display:block;
}

#footer {
    width:100%;
    height:60px;
    border:1px solid orange;
    display:block;
}
#footers {
    width:50%;
    margin:5px auto;
    border:1px solid orange;
    height:40px;
    display:block;
}

`Fiddle`

Answer 7

<强> HTML

<html>
<head>
<style>

    header,nav,section,footer{
    width:960px
    margin:0 auto
    }
</style>

</head>
<body>
    <header>
    <div id="logo"></div>
    <nav>
        <u1>
                <li>list items</li>
        <ul>
    </nav>
    </header>
<section>
    <article>your content follows here</article>
</section>
<footer>
</footer>
</body>
</html>

HTML / CSS布局上的Fluid DIVS

CSS

HTML

7 个答案:

`Fiddle`