переполнение справки в CSS - PullRequest
Новая
       31

переполнение справки в CSS

0 голосов
/ 07 февраля 2012

У меня есть тег div, который является основным контейнером, а внутри у меня есть еще три. Теперь, что я хочу сделать, это поставить их справа от всех. Я имею в виду, что один div будет слева, третий посередине, а третий справа. но единственный div, который будет виден, - это первый слева, а остальные не будут видны. Я использовал переполнение скрыто, но не работает.

вот мой код. Пожалуйста, скажите мне, что я делаю не так. 

<!DOCTYPE HTML>
<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        body {
            margin: 0;
        }
        #header {
            width: 100%; height: 50px;
            background: aqua;
        }
        ul {
            list-style: none;
            margin: 0;
        }
        ul li {
            float: left;
            margin-right: 30px;
        }
        #contents {
            width: 100%; height: 600px; overflow: hidden;
            background: lightblue;
        }
        .contentsWrapper {
            display: block;
            width: 100%; height: 300px;
        }
        #contentsOne { background: red; }
        #contentsTwo { background: blue; }
        #contentsThree { background: grey; }
    </style>
    <title>title</title>
</head>
<body>
    <div id="header">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <div id="contents">
        <div class="contentsWrapper" id="contentsOne">One</div>
        <div class="contentsWrapper" id="contentsTwo">Two</div>
        <div class="contentsWrapper" id="contentsThree">Three</div>
    </div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 08 февраля 2012

Не знаю, понял ли я вашу проблему, вы хотите что-то подобное? http://jqueryui.com/demos/accordion/fillspace.html для этого вы можете использовать плагин jQuery из демо-версии и добавлять каждую нужную вам часть.

0 голосов
/ 07 февраля 2012

Это то, что вы хотите?

Заменить: 

#contentsOne { background: red; }
#contentsTwo { background: blue; }
#contentsThree { background: grey; }

с: 

#contentsOne { background: red; float:left;width:33%;}
#contentsTwo { background: blue; float:left;width:33%;visibility:hidden; }
#contentsThree { background: grey;visibility:hidden;}
...