Что не так с моим кодом на css переполнение скрытого свойства? - PullRequest
Новая
       41

Что не так с моим кодом на css переполнение скрытого свойства?

0 голосов
/ 09 января 2012

Я хочу скрыть переполненный контент от div id = "windowPanel", поэтому, когда я вызываю определенный элемент div в Js, он прокручивается до этого элемента.

Я поиграл с позиционированием div, но не могу заставить его работатьвот мой код: 

body {
    width:auto;
}


#windowpanel {
    width:800px;
    height:200px;
    overflow:hidden ;
    position:relative;

}

.bannerContainer {
    width:100%;
    height:500%;
    position:absolute;

}

.itemContainer {
    float:left;
    width:100%;
    height:20%;
    display:block;
    position:relative;

}

.photoItem {
    float:left;
    width:50%;
}

.textItem {
    float:left;
    width:50%;

}

.navItem {
    float:left;
    top:200px;
    left:600px;
    position:absolute;
    display:inline-block;


}

<div id="windowPanel">
    <div class="bannerContainer">
        <div class="itemContainer">
        <div class="textItem">Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</div>
        <div class="photoItem"><img class="" src="images/target.png" width="350" height="248" alt="image1" /></div>
        <div class="navItem">
            <a class="navItemLink" /> Nav here</div>
        </div>

        <div class="itemContainer">
        <div class="textItem">Text here</div>
        <div class="photoItem">Photo Here</div>
        <div class="navItem">Nav here</div>
        </div>

        <div class="itemContainer">
        <div class="textItem">Text here</div>
        <div class="photoItem">Photo Here</div>
        <div class="navItem">Nav here</div>
        </div>

        <div class="itemContainer">
        <div class="textItem">Text here</div>
        <div class="photoItem">Photo Here</div>
        <div class="navItem">Nav here</div>
        </div>

        <div class="itemContainer">
        <div class="textItem">Text here</div>
        <div class="photoItem">Photo Here</div>
        <div class="navItem">Nav here</div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 09 января 2012

Там было несколько вещей не так.Я исправил это здесь .

  1. У вашего <div> был идентификатор "windowPanel", но ваш селектор CSS был "#windowpanel".CSS-селекторы чувствительны к регистру.

  2. <a> теги не могут быть закрыты самостоятельно.

  3. Вам нужно будет явно определить высоту в 'px', если дочерние элементы плавают или выдолжен очистить поплавки.

...