我遇到的问题是我在页面的中心放置了一个包装器（内容），在包装器中有两列（文本和表单）。
我试图将它们并排放置，但是，每次我执行此操作时，表单列都会向右移动。我希望它们能够并排居中，当你重新调整浏览器的大小时，它会像facebook.com一样中断。
#header,
#content,
#footer {
display:inline;
position:relative;
float:left;
background-color:#eee;
}
#header,
#footer {
width: 100%;
height: 60px;
display:inline;
position:relative;
float:left;
background-color:#eee;
}
#content {
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
max-height:600px;
margin:0 auto;
}
}
#header {
margin-bottom:2%;
}
#footer {
margin-top:2%;
width:100%;
height:60px;
}
h2 {
position: relative;
text-align: center;
}
h2 span {
background: #fff;
padding: 0 15px;
position: relative;
z-index: 1;
}
h2:before {
background: #ddd;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 100%;
}
h2:before {
left: 0;
}
#login_form{
margin: auto;
width: 80%;
border: 0px solid none;
padding: 10px;
}
#registration_form{
text-align: center;
margin: auto;
width: 80%;
border: 0px solid none;
padding: 10px;
}
.login{
text-align: center;
}
.username{
margin: auto;
width: 70%;
border: 0px solid none;
padding: 10px;
}
.content{
margin-right: 16px;
width:560px;
float:left;
left:80px;
}
.sidebar{
width: 395px;
display: inline-block;
vertical-align: top;
float:right;
right: 80px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
</head>
<body>
<div id="header"><header>header<header>
</div>
<div id="content">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio
et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,<p>
</div>
<div class="sidebar">
<h2><span>Login</span></h2>
<form>
<div id="login_form">
<div class="username">
Username<input type="text" name="username"><br>
<input type="checkbox" name="login" value="login">Keep me logged in<br>
Password<input type="password" name="password"><br>
</div>
<div class="login">
<a href="">Forgot your password?</a><br>
<input type="submit" value="Log In"><br>
or<br>
<input type="button" value="Facebook"><input type="button" value="Google+"><br>
</div>
</div>
</form>
<h2><span>Sign Up</span></h2>
<form>
<div id="registration_form">
<input type="text" name="firstname" value="First name">
<input type="text" name="lastname" value="Last name"><br>
<input type="text" name="email" value="Email">
<input type="text" name="username" value="Username"><br>
<input type="password" name="password" value="Password">
<input type="password" name="confpass" value="last name"><br>
<p>By clicking Sign Up, you agree to our <a href="">Terms</a>
and that you have read our <a href="">Data Policy</a>, including our <a href="">Cookie Use</a>.</p>
<input type="submit" value="Sign up">
</div>
</form>
</div>
</div>
<div id="footer"><footer>footer</footer>
</body>
</html>
答案 0 :(得分：0)
首先，您的#content应该居中对齐。要做到这一点，你可以给它一个width值和margin:auto;，或者你可以用百分比填充给它一个百分比宽度。在这种情况下，我使用百分比方式。
要使.content和.sidebar彼此相邻，您需要width:50%;（或任何比例）同时display:inline-block;或float:left;元素。在这里，我使用了float:left;。
我无法在编辑器的小结果窗口中正确看到页面。所以请记住，这只适用于大型设备。要使其适用于较小/移动设备，您需要使用 CSS媒体查询。
#header,
#content,
#footer {
display: inline;
position: relative;
float: left;
background-color: #eee;
}
#header,
#footer {
width: 100%;
height: 60px;
display: inline;
position: relative;
float: left;
background-color: #eee;
}
#content {
padding-top: 20px;
padding-bottom: 20px;
width: 80%;
margin: 0px 10%;
}
}
#header {
margin-bottom: 2%;
}
#footer {
margin-top: 2%;
width: 100%;
height: 60px;
}
h2 {
position: relative;
text-align: center;
}
h2 span {
background: #fff;
padding: 0 15px;
position: relative;
z-index: 1;
}
h2:before {
background: #ddd;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 100%;
}
h2:before {
left: 0;
}
#login_form {
margin: auto;
width: 80%;
border: 0px solid none;
padding: 10px;
}
#registration_form {
text-align: center;
margin: auto;
width: 80%;
border: 0px solid none;
padding: 10px;
}
.login {
text-align: center;
}
.username {
margin: auto;
width: 70%;
border: 0px solid none;
padding: 10px;
}
.content {
width: 60%;
float: left;
}
.sidebar {
width: 40%;
float: left;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/stylesheet.css" />
</head>
<body>
<div id="header">
<header>header
<header>
</div>
<div id="content">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
<p>
</div>
<div class="sidebar">
<h2><span>Login</span></h2>
<form>
<div id="login_form">
<div class="username">
Username
<input type="text" name="username">
<br>
<input type="checkbox" name="login" value="login">Keep me logged in
<br>Password
<input type="password" name="password">
<br>
</div>
<div class="login">
<a href="">Forgot your password?</a>
<br>
<input type="submit" value="Log In">
<br>or
<br>
<input type="button" value="Facebook">
<input type="button" value="Google+">
<br>
</div>
</div>
</form>
<h2><span>Sign Up</span></h2>
<form>
<div id="registration_form">
<input type="text" name="firstname" value="First name">
<input type="text" name="lastname" value="Last name">
<br>
<input type="text" name="email" value="Email">
<input type="text" name="username" value="Username">
<br>
<input type="password" name="password" value="Password">
<input type="password" name="confpass" value="last name">
<br>
<p>By clicking Sign Up, you agree to our <a href="">Terms</a> and that you have read our <a href="">Data Policy</a>, including our <a href="">Cookie Use</a>.</p>
<input type="submit" value="Sign up">
</div>
</form>
</div>
</div>
<div id="footer">
<footer>footer</footer>
</body>
</html>