HTML / CSS布局上的流畅DIVS

Question

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

这基本上是我想要的：

在此处输入图片说明

我希望网站根据窗口大小自动调整大小-第一个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

如果优先考虑响应性和调整大小，请尝试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解决方案应该起作用。

您还可以使用文本对齐方式：

.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;
}

`小提琴`

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布局上的流畅DIVS

问题描述

CSS

HTML

7 个解决方案

解决方案1
1 2014-01-31 05:17:50

解决方案2
0 2014-01-31 05:21:15

解决方案3
0 2014-01-31 05:23:59

解决方案4
0 已采纳 2014-01-31 05:25:20

解决方案5
0 2014-01-31 06:03:12

解决方案6
0 2014-01-31 06:29:36

`小提琴`

解决方案7
0 2014-04-05 08:41:27

HTML / CSS布局上的流畅DIVS

问题描述

CSS

HTML

7 个解决方案

解决方案1 1 2014-01-31 05:17:50

解决方案2 0 2014-01-31 05:21:15

解决方案3 0 2014-01-31 05:23:59

解决方案4 0 已采纳 2014-01-31 05:25:20

解决方案5 0 2014-01-31 06:03:12

解决方案6 0 2014-01-31 06:29:36

小提琴

解决方案7 0 2014-04-05 08:41:27

解决方案1
1 2014-01-31 05:17:50

解决方案2
0 2014-01-31 05:21:15

解决方案3
0 2014-01-31 05:23:59

解决方案4
0 已采纳 2014-01-31 05:25:20

解决方案5
0 2014-01-31 06:03:12

解决方案6
0 2014-01-31 06:29:36

`小提琴`

解决方案7
0 2014-04-05 08:41:27