css /将主要内容div定位在登录和注册div的右侧
[英]css / position main content div to right of login and register div
问题描述
我正在尝试创建一个带有页眉，页脚和三个div之间的页面。 现在看起来像这样：
这是我的HTML和CSS：
index.php
<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
<script src="reqscripts/jquery.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/application.css">
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<header>
<h1>ONE DAY ONLY</h1>
<p>THE BIZZ()</p>
</header>
<div id="login"></div>
<div id="register"></div>
<div id="main"><p>Content</p></div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
</html>
css / application.css
* {
margin: 0;
}
html, body {
background: rgba(179,180,255,1);
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
.footer {
background: rgba(22,138,43,1);
}
#loginform {
width: 240px;
height: 165px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
font-family: 'Londrina Solid', cursive;
}
#registerform {
width: 240px;
height: 200px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-top: 0px;
padding-bottom: 0px;
font-family: 'Londrina Solid', cursive;
}
#loginuser, #loginpass, #reguser, #regpass, #regemail {
float: right;
}
#submitbutton, #registerbutton {
text-align: center;
}
.textaligncenter {
text-align: center;
}
header {
font-family: 'Londrina Solid', cursive;
background: rgba(179,180,255,1);
height: 90px;
}
#main {
background: rgba(207,207,255, 1);
}
我已经尝试在主div上添加float: right ，由于某种原因，它将其浮动到了正确的位置，但进入了页脚div。 我希望主div（带有“ Content”）位于登录和注册div的右侧。
我将其用于粘性页脚：
http://ryanfait.com/sticky-footer/
更新
根据以下建议，该页面现在如下所示：
更新
我将div放置在想要的位置，但是当我添加一堆换行符以扩展主div时，它延伸到了stickyfooter上，这不应该发生...
这是我更改的内容：
#main {
background: rgba(207,207,255, 1);
float: left;
}
#loginregcss {
float: left;
}
#content {
float: left;
}
这是我的html：
<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
<script src="reqscripts/jquery.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/application.css">
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<header>
<h1>ONE DAY ONLY</h1>
<p>THE BIZZ()</p>
</header>
<div id="loginregcss">
<div id="login"></div>
<div id="register"></div>
</div>
<div id="content">
<div id="main"><p>Content</p></div>
</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
</html>
看起来像这样：
3 个解决方案
解决方案1
0 2013-06-23 13:31:44
尝试这个：
<body>
<div class="wrapper">
<div id="left">
<div id="login"></div>
<div id="register"></div>
</div>
<div id="main"><p>Content</p></div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
#left{
width: 250px;
float: left;
}
#main{
width: 700px;
margin-left: 50px;
float: left;
}
若要使页脚始终位于底部：
.push{
clear: both;
}
解决方案2
0 2013-06-23 13:56:00
尝试以下步骤：将登录名和注册都移动到div，如下所示：
<div class="leftBar">
<div id="login"></div>
<div id="register"></div>
</div>
并将left float添加到class leftBar和main中。 向该leftBar添加一点边距。 完整的代码在这里：
<title>ONE DAY ONLY</title>
<body>
<div class="wrapper">
<header>
<h1>ONE DAY ONLY</h1>
<p>THE BIZZ()</p>
</header>
<div class="row">
<div class="leftBar">
<div id="login"></div>
<div id="register"></div>
</div>
<div id="main"><p>Content</p></div>
<div class="push"></div>
</div>
</div>
<div class="footer"></div>
这里是CSS：
* {
margin: 0;
}
html, body {
background: rgba(179,180,255,1);
height: 100%;
}
.wrapper {
min-height: 600px;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
.footer {
background: rgba(22,138,43,1);
width:100%;
}
.leftBar{
float:left ;
width:28%;
margin-right:10px;
}
#login {
width: 240px;
height: 165px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
font-family: 'Londrina Solid', cursive;
}
#register {
width: 240px;
height: 200px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-top: 0px;
padding-bottom: 0px;
font-family: 'Londrina Solid', cursive;
}
#loginuser, #loginpass, #reguser, #regpass, #regemail {
float: right;
}
#submitbutton, #registerbutton {
text-align: center;
}
.textaligncenter {
text-align: center;
}
header {
font-family: 'Londrina Solid', cursive;
background: rgba(179,180,255,1);
height: 90px;
}
.row{
width:100%;
}
#main {
background: rgba(207,207,255, 1);
float:left;
width:60%;
min-height:300px;
}
查看此链接
解决方案3
0 已采纳 2013-06-23 14:09:37
谢谢您的帮助……我需要clear: both; 对于.footer和.push -这里建议- http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
CSS-页眉，内容，右div，页脚-无法正确定位
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.