容器div对齐不正确
[英]Container div not Aligning properly
问题描述
我的容器div不能正确对齐，也不能使容器div内的div左右对齐。 它不断从主div或容器中出来。
这是我简单的首页设计，但是div根据此布局未正确缩进：
#container{ background-color:white; width:100%; height:1200px; } #logo{ background-color:yellow; width:30%; height:100px; float:left; } #header{ background-color:green; width:100%; height:100px; float:left; } #navigation{ width:100%; height:40px; background-color:white; float:left; } #webname{ background-color:gray; width:70%; height:100px; float:right; } #mainclass{ width:100%; height:950px; float:left; } #asideright{ background-color:red; width:10%; height:950px; float:right; } #asideleft{ background-color:purple; width:20%; height:950px; float:left; } #selection{ background-color:yellow; width:70%; height:950px; float:center; } #footer{ background-color:green; width:100%; height:100px; float:;left; }
<html> <head> <title id="title">DUMMY </title> <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> <link rel="stylesheet" type="text/css" href="dumm1.css"> </head> <body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="webname"> </div> </div> <div id="navigation"> </div> <div id="mainclass"> <div id="asideleft"> </div> <div id="selection"> </div> <div id="asideright"> </div> </div> <div id="footer"> </div> </div> </body> </html>
3 个解决方案
解决方案1
0 2015-06-14 05:54:12
没有诸如float: center;类的属性float: center; 您必须更改该属性以使#selection float: left; 。
请参考本教程。
解决方案2
0 2015-06-14 06:45:52
您可以使用此方法。
* { margin: 0; padding: 0; } .container { width: 1170px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background-color:red; } .row { margin-right: -15px; margin-left: -15px; } .inner_div { width: 25%; float:left; background-color:green; } .big_div { width: 75%; float:left; background-color:yellow; }
<html> <head> <title id="title">DUMMY </title> <link rel="icon" type="image/jpeg" href="dummy1.jpeg"> <link rel="stylesheet" type="text/css" href="dumm1.css"> </head> <body> <div class="container"> <div class="row"> <div class="inner_div" style="background-color:purple;"> i'm the inner container </div> <div class="inner_div" style="background-color:pink;"> i'm another one </div> <div class="inner_div" style="background-color:green;"> another one </div> <div class="inner_div" style="background-color:orange;"> woho! another one </div> <div class="big_div"> yipee! i'm another container </div> <div class="inner_div" style="background-color:red;"> yehaa! i'm another container </div> </div> <div id="navigation"> </div> <div id="mainclass"> <div id="asideleft"> </div> <div id="selection"> </div> <div id="asideright"> </div> </div> <div id="footer"> </div> </div> </body> </html>
解决方案3
0 已采纳 2015-06-14 06:51:07
这是你正确的CSS
#container {
background-color: white;
width: 100%;
height: 1200px;
}
#logo {
background-color: yellow;
width: 30%;
height: 100px;
float: left;
}
#header {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
#navigation {
width: 100%;
height: 40px;
background-color: white;
float: left;
}
#webname {
background-color: gray;
width: 70%;
height: 100px;
float: right;
}
#mainclass {
width: 100%;
height: 950px;
/*float: left;*/
}
#asideright {
background-color: red;
width: 10%;
height: 950px;
float: right;
}
#asideleft {
background-color: purple;
width: 20%;
height: 950px;
float: left;
}
#selection {
background-color: yellow;
width: 70%;
height: 950px;
float: left;
}
#footer {
background-color: green;
width: 100%;
height: 100px;
float: left;
}
引导容器未正确对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.