Fatal编程技术网
  • css/
  • CSS：帮助对齐相邻的div（展开-折叠）框

CSS：帮助对齐相邻的div（展开-折叠）框

css html

CSS：帮助对齐相邻的div（展开-折叠）框,css,html,alignment,expand,collapse,Css,Html,Alignment,Expand,Collapse,我在对齐相邻的两个div框时遇到一些问题；。或者更准确地说，我已经对齐了相邻的两个“头”框，但我的问题是，我将它们用作展开-折叠容器，而这些框将无法正确对齐 我在下面发布了完整的代码，如果有人能解决这个问题，我将不胜感激，这可能并不难。另一个问题是，当我展开隐藏区域时，两个框“重置”，然后再次站在彼此下面 <html> <head> <!-- Panel Slider for Contact --> <script src="http://ajax.g

我在对齐相邻的两个div框时遇到一些问题；。或者更准确地说，我已经对齐了相邻的两个“头”框，但我的问题是，我将它们用作展开-折叠容器，而这些框将无法正确对齐

我在下面发布了完整的代码，如果有人能解决这个问题，我将不胜感激，这可能并不难。另一个问题是，当我展开隐藏区域时，两个框“重置”，然后再次站在彼此下面

<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>


$（函数（）{
$（“#mostrar1”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja1”）.slideToggle（）；
});
$（“#caja1 a”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja1”）.slideUp（）；
});
$（“#mostrar2”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja2”）.slideToggle（）；
});
$（“#caja2 a”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja2”）.slideUp（）；
});
});  
.滑出舱{
填充：20px；
宽度：250px；
背景#031F2F；
边际：0px；
}
#卡贾1{
宽度：30%；
显示：无；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#99a8ff；
}
#莫斯特拉1{
显示：块；
宽度：30%；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#0C415F；
浮动：左；
颜色：#FFFFFF；
}           
#卡贾2{
宽度：30%；
显示：无；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#99a8ff；
}
#莫斯特拉2{
显示：块；
宽度：30%；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#0C415F；
浮动：左；
颜色：#FFFFFF；
}           
}   
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。这是一个非常重要的问题，因为它是一个非常重要的问题，它是一个非常重要的问题。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦
谢谢
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>


$（函数（）{
$（“#mostrar1”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja1”）.slideToggle（）；
});
$（“#caja1 a”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja1”）.slideUp（）；
});
$（“#mostrar2”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja2”）.slideToggle（）；
});
$（“#caja2 a”）。单击（函数（事件）{event.preventDefault（）；
$（“#caja2”）.slideUp（）；
});
}); 
.包装纸{
宽度：30%；
浮动：左；
}
.滑出舱{
填充：20px；
宽度：250px；
背景#031F2F；
边际：0px；
}
#卡贾1{
显示：无；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#99a8ff；
}
#莫斯特拉1{
显示：块；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#0C415F；
颜色：#FFFFFF；
}
#卡贾2{
显示：无；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#99a8ff；
}
#莫斯特拉2{
显示：块；
填充物：5px；
边框：2个实心#FFFFFF；
背景色：#0C415F；
颜色：#FFFFFF；
}
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦

他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦
chrome也批准了这项更改。