CSS: Помочь с выравниванием блоков div (развернуть - свернуть) рядом друг с другом - PullRequest
Новая
       36

CSS: Помочь с выравниванием блоков div (развернуть - свернуть) рядом друг с другом

0 голосов
/ 19 марта 2010

У меня возникли проблемы с выравниванием двух блоков 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>

Спасибо Mestika

1 Ответ

2 голосов
/ 19 марта 2010

Это сработало для меня в Firefox 3.7a. Две вещи изменились: добавили тип документа и завернули каждый столбец в оболочку Класс Wrapper, вероятно, можно назвать более семантическим, это ваше дело 

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