如何让主盒位于所有元素的中间?它目前位于排名第一的盒子下面,我希望它在中间拍打,滑到菜单下方。我知道这是非常基本的东西,但我有点卡住了。
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;
}
答案 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;
}
这也是我所做的一个小例子:
答案 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>