HML Div Positioning

如何使主框位于所有元素的中间？它现在位于#1框的下面，我希望它正好在中间，滑到菜单下面。我知道这是非常基本的东西，但我有点卡住了。

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

我为您修复了代码。我所做的是添加了一个播放容器滚动的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/

您应该将类为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>

相关内容

最新更新

热门标签：