fiddle :
这是我的代码:
<div id="container">
<div id="header">
<img align="center" src="images/image.png" />
</div>
<div id="wrapper">
<div id="slogan">
<h2>Some Text</h2>
</div>
<div id="login">
<form name="loginForm" action="<c:url value='j_spring_security_check'/>" method="post">
Enter User Name: <input type="text" name="username"><br>
Enter Password: <input name="password" type="password"><br>
<input type="submit" value="Login">
</form>
</div>
<div id="register">
<a href="register.php"><img align="center" src="images/signup.png" /></a>
</div>
</div>
这是 CSS:
#container {width: 800px;
margin-left:auto;
margin-right:auto;
position: relative;}
#header {width: 800px;
height: 260px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
text-align:center; }
#wrapper {
width: 800px;
margin-left:auto;
margin-right:auto;
margin-top: 80px;
}
#slogan {width: 100%;
margin-left:auto;
margin-right:auto;
text-align: center;
border:2px solid;}
#login { width: 399px;
height:200px;
float: left;
margin-left:auto;
margin-right:auto;
border:2px solid;
text-align:center;text-align: center;
vertical-align: middle;
}
#register { width: 393px;
height:200px;
float:right;
margin-left:auto;
margin-right:auto;
border:2px solid;
text-align: center;
vertical-align: middle;
line-height: 200px;}
现在我已经尝试了很多我在这里找到的方法。我正在使用谷歌浏览器。使用此方法时，登录和注册的边框边缘不要与Slogan对齐。我尝试过的其他方法，最终注册仍在登录下方。或者反过来。我希望这些 div 的长度与口号相同，并且紧挨着彼此，因此它们都紧贴着口号并触及彼此的边界。
有什么想法吗？ 谢谢大家!
此外，我希望登录表单在垂直和水平方向上都位于中心。与注册分区相同。这将允许我将两张图片都放在那里!
再次感谢!
最佳答案
fiddle :
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$.fn.center = function(parent) {
this.css("position", "relative");
this.css("top", ($(parent).height() - this.height()) / 2 + "px");
this.css("left", ($(parent).width() - this.width()) / 2 + "px");
return this;
};
$(function() {
$('#loginForm').center("#login");
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<img align="center" src="images/image.png" />
</div>
<div id="wrapper">
<div id="slogan">
<h2>Some Text</h2>
</div>
<div class="main">
<div id="login">
<form id="loginForm" name="loginForm" action="<c:url value='j_spring_security_check'/>" method="post">
Enter User Name: <input type="text" name="username"><br>
Enter Password: <input name="password" type="password"><br>
<input type="submit" value="Login">
</form>
</div>
<div id="register">
<a href="register.php"><img align="center" src="images/signup.png" /></a>
</div>
</div>
</div>
</div>
</body>
</html>
样式.css:
body{
background: #FFFFFF;
}
#container {
width: 800px;
margin:auto;
}
#header {
width: 800px;
height: 260px;
margin:auto;
overflow: hidden;
text-align:center;
}
#wrapper {
width: 800px;
margin: auto;
margin-top: 80px;
}
#slogan {
margin:auto;
text-align: center;
border:2px solid;
}
.main{
background:#efefef;
overflow:hidden;
}
#login {
width: 396px;
height:200px;
float: left;
border:2px solid;
text-align:center;
}
#register {
width: 396px;
height:200px;
border:2px solid;
text-align: center;
vertical-align: middle;
float:left;
}
您可以直接从网站下载 jquery 并将其包含在您的元素中，并为其提供相对路径，而不是下面的行:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
只需保存此代码并包含在您的元素中:
关于html - 我想要 2 个 HTML/CSS div 并排放置(尝试了其他方法)，(也在 div 中格式化)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23579386/