Html HML Div定位我怎样才能把主盒子放在所有元素的中间呢？它现在坐在1号盒子下面，我想要它在中间打滑，在菜单下面滑动。我知道这是非常基本的东西，但我有点卡住了_Html_Css_Layout

Html HML Div定位我怎样才能把主盒子放在所有元素的中间呢？它现在坐在1号盒子下面，我想要它在中间打滑，在菜单下面滑动。我知道这是非常基本的东西，但我有点卡住了

html css layout

Html HML Div定位我怎样才能把主盒子放在所有元素的中间呢？它现在坐在1号盒子下面，我想要它在中间打滑，在菜单下面滑动。我知道这是非常基本的东西，但我有点卡住了,html,css,layout,Html,Css,Layout,HTML: 您应该将带有classmain的div置于设置div之前 #标题{ 宽度：1330px；高度：200px；边框：1px实心； } h1{ 字体大小：500%；字体系列：Helvetica；文本转换：大写；颜色：#9DC8C3；文本阴影：0 1px0 rgba（255255255.5），0-1px0 rgba（0,0,0.8）；文本对齐：居中； } /*菜单*/ #菜单1{ 宽度：211px；高度：400px；浮动：左；边框：1px实心；填充物：5px；边缘顶

HTML:

您应该将带有class

main

的div置于

设置

div之前

#标题{
宽度：1330px；
高度：200px；
边框：1px实心；
}
h1{
字体大小：500%；
字体系列：Helvetica；
文本转换：大写；
颜色：#9DC8C3；
文本阴影：0 1px0 rgba（255255255.5），0-1px0 rgba（0,0,0.8）；
文本对齐：居中；
}
/*菜单*/
#菜单1{
宽度：211px；
高度：400px；
浮动：左；
边框：1px实心；
填充物：5px；
边缘顶部：5px；
右边距：5px；
边缘底部：5px；
}
#菜单2{
宽度：200px；
高度：75px；
浮动：左；
边框：1px实心；
填充物：5px；
保证金：5px；
}
#菜单3{
宽度：200px；
高度：75px；
浮动：左；
边框：1px实心；
填充物：5px；
保证金：5px；
}
#菜单4{
宽度：200px；
高度：75px；
浮动：左；
边框：1px实心；
填充物：5px；
保证金：5px；
}
#菜单5{
宽度：200px；
高度：75px；
浮动：左；
边框：1px实心；
填充物：5px；
保证金：5px；
}
#背景{
宽度：200px；
高度：400px；
浮动：左；
边框：1px实心；
填充物：5px；
左边距：5px；
边缘顶部：5px；
边缘底部：5px；
}
#主要{
宽度：700px；
高度：400px；
浮动：左；
边框：1px实心；
}

标题
#1
#2
#3
#4
#5
主要
设置

我为您修复了代码。我所做的是，我添加了一个播放容器滚动的div和一个表，以保持settings 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>

还有一个我做过的小例子：

谢谢！我知道这很简单。

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

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

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