CSS:帮助与对齐DIV(扩大 - 崩溃)盒彼此相邻
题
我有对准彼此相邻2个格框一些麻烦;.或者更准确地说,我已经对准我的两个“头”旁边的复选框对方,但我的问题是,我用它们作为展开 - 收起容器和那些箱子不会正确对齐。
我下面张贴整个代码,如果有人有办法解决这个问题,这可能并不难将不胜感激。而另一个问题是,那个时候我扩大了隐藏区域的两箱“复位”,并再次下彼此立场。
<html>
<head>
<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!-- Expand Collapse -->
<script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
$("#caja1").slideToggle();
});
$("#caja1 a").click(function(event) {event.preventDefault();
$("#caja1").slideUp();
});
$("#mostrar2").click(function(event) {event.preventDefault();
$("#caja2").slideToggle();
});
$("#caja2 a").click(function(event) {event.preventDefault();
$("#caja2").slideUp();
});
}); </script>
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #031F2F;
margin: 0px;
}
#caja1 {
width:30%;
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar1{
display:block;
width:30%;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
float: left;
color: #FFFFFF;
}
#caja2 {
width:30%;
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar2{
display:block;
width:30%;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
float: left;
color: #FFFFFF;
}
}
</style>
</head>
<body>
<a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div><a href="#" id="mostrar2">Erhverv</a><div style="display: none;" id="caja2"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</body>
</html>
由于 Mestika
解决方案
这为我工作在Firefox 3.7A。有两件事情改变:增加了一个DOCTYPE和包覆在包覆每列。包装类很可能被命名为东西更多的语义,这完全取决于你。
<!DOCTYPE html>
<html>
<head>
<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!-- Expand Collapse -->
<script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
$("#caja1").slideToggle();
});
$("#caja1 a").click(function(event) {event.preventDefault();
$("#caja1").slideUp();
});
$("#mostrar2").click(function(event) {event.preventDefault();
$("#caja2").slideToggle();
});
$("#caja2 a").click(function(event) {event.preventDefault();
$("#caja2").slideUp();
});
}); </script>
<style type="text/css">
.wrapper {
width: 30%;
float: left;
}
.slide-out-div {
padding: 20px;
width: 250px;
background: #031F2F;
margin: 0px;
}
#caja1 {
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar1{
display:block;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
color: #FFFFFF;
}
#caja2 {
display: none;
padding:5px;
border:2px solid #FFFFFF;
background-color:#99a8ff;
}
#mostrar2{
display:block;
padding:5px;
border:2px solid #FFFFFF;
background-color:#0C415F;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="wrapper">
<a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div>
<div class="wrapper">
<a href="#" id="mostrar2">Erhverv</a><div style="display: none;" id="caja2"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div>
</body>
</html>
不隶属于 StackOverflow