Question

我是编程新手，我想按如下方式安排div元素：

header div 1
--------------------
left 2 | center 3| right 4 |
---------------------
footer div  5

我尝试了位置和显示属性但未能获得所需的结果。

我如何以这种方式安排以及如何以简单的方式安排任何div元素？

Answer 1

尝试使用此代码进行div结构。

＆＃13;

.wrapper {
    color: #fff;
    float: left;
    text-align: center;
    width: 100%;
}
.header {
    background-color: red;
    float: left;
    width: 100%;
}
.left {
    background-color: orange;
    float: left;
    width: 25%;
}
.center {
    background-color: green;
    float: left;
    width: 50%;
}
.right {
    background-color: orange;
    float: left;
    width: 25%;
}
.footer {
    background-color: blue;
    float: left;
    width: 100%;
}
.header, .footer {
    margin: 1% 0;
}

＆＃13;

<div class="wrapper">
    <div class="header">
        <h1>Header Div</h1>
    </div>
    <div class="left">
        <h1>Left Div</h1>
    </div>
    <div class="center">
        <h1>Center Div</h1>
    </div>
    <div class="right">
        <h1>Right Div</h1>
    </div>
    <div class="footer">
        <h1>Footer Div</h1>
    </div>
</div>

＆＃13;

Answer 2

试试此代码

HTML

<div class="header">Header Div</div>

<div class="left-section"></div>
<div class="center-section"></div>
<div class="right-section"></div>


<div class="footer-section">Footer</div>

CSS

.header{
    width:100%;
    height:50px;
    background:green;
}
.left-section{
    height:500px;
    width:29%;
    display:inline-block;
    background:yellow;
   padding:0px;
    margin:0px;
}
.right-section{
    height:500px;
    width:29%;
    display:inline-block;
    background:gold;
   padding:0px;
    margin:0px;
}
.center-section{
    height:500px;
    width:40%;
    display:block;
    display:inline-block;
    background:gray;
    padding:0px;
    margin:0px;
}
.footer-section{
    width:100%;
    height:50px;
    background:orange;  
}

Codepen链接

http://codepen.io/santoshkhalse/pen/gwWbAV

如何在页眉和页脚div

2 个答案: