HML Div定位

时间:2015-07-04 17:57:15

标签: html css layout

如何让主盒位于所有元素的中间?它目前位于排名第一的盒子下面,我希望它在中间拍打,滑到菜单下方。我知道这是非常基本的东西,但我有点卡住了。

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div group="menu">
    <div id="menu1">#1</div>
    <div id="menu2">#2</div>
    <div id="menu3">#3</div>
    <div id="menu4">#4</div>
    <div id="menu4">#5</div>
    <div id="settings">Settings</div>
    <div id="main">Main</div>
</div>
</body>
</html>

CSS:

#header{
    width: 1330px;
    height: 200px;
    border: 1px solid;

}

h1{
    font-size: 500%;
    font-family: Helvetica;
    text-transform: uppercase;
    color: #9DC8C3;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.8);
    text-align: center;
}


/*menus */

#menu1{
    width:211px;
    height:400px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

#menu2{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu3{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu4{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu5{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#settings{
    width:200px;
    height:400px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#main{
    width:700px;
    height:400px;
    float: left;
    border: 1px solid;
}

2 个答案:

答案 0 :(得分:1)

我为您修复了代码。我做的是我添加了一个div,它播放一个容器卷和一个表,以保持右侧的设置div和左侧的其余div。

这是HTML部分:

<html>
<head>
</head>
<body>
<div class="container">    
    <div id="header"><h1>Header</h1></div>
    <table border="0">
        <tr>
    <div group="menu" class="menu-group">
    <div id="menu1">#1</div>
    <div id="menu2">#2</div>
    <div id="menu3">#3</div>
    <div id="menu4">#4</div>
    <div id="menu5">#5</div>
    <div id="main">Main</div> 
    </div> 
            <td>
    <div id="settings">Settings</div>
            </td>
        </tr>
    </table>
</div>    
</body>
</html>

以下是CSS部分:

.container {
    width: 1330px;
}

#header{
    width: 100%;
    height: 200px;
    border: 1px solid;

}

h1{
    font-size: 500%;
    font-family: Helvetica;
    text-transform: uppercase;
    color: #9DC8C3;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.8);
    text-align: center;
}


/*menus */

#menu1{
    width:211px;
    height:400px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

#menu2{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu3{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu4{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu5{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#settings{
    width:200px;
    height:400px;
    border: 1px solid;
    float: right;
    margin-top: 3px;
    margin-left: 3px;

}

#main{
    width:700px;
    height:400px;
    float: left;
    border: 1px solid;
    margin:5px;
}

这也是我所做的一个小例子:

https://jsfiddle.net/5tjp8sc8/2/

答案 1 :(得分:0)

您应该在main div。

之前放置类settings的div

#header{
    width: 1330px;
    height: 200px;
    border: 1px solid;

}

h1{
    font-size: 500%;
    font-family: Helvetica;
    text-transform: uppercase;
    color: #9DC8C3;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.8);
    text-align: center;
}


/*menus */

#menu1{
    width:211px;
    height:400px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

#menu2{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu3{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu4{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#menu5{
    width:200px;
    height:75px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin: 5px;
}

#settings{
    width:200px;
    height:400px;
    float:left;
    border: 1px solid;
    padding: 5px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#main{
    width:700px;
    height:400px;
    float: left;
    border: 1px solid;
}
<div id="header"><h1>Header</h1></div>
<div group="menu">
    <div id="menu1">#1</div>
    <div id="menu2">#2</div>
    <div id="menu3">#3</div>
    <div id="menu4">#4</div>
    <div id="menu4">#5</div>
    <div id="main">Main</div>
    <div id="settings">Settings</div>    
</div>