Помогите разобраться с border для div

maxmaster · April 18, 2012

Доброго времени суток!

Есть два div`а: в одном большая картинка, в другом превьюшки. Для второго div назначен стиль border. Проблема в том, что border рисуется не вокруг самого div, а как отдельный элемент. Под спойлерами исходники и скрины. Так отображается в ФФ 11, Хром 17, Опера 11.62. Если вставить в HTML нужного div картинку самому(не яваскриптом), то результат не меняется

Картинки

Reveal hidden contents
Как выглядит. Серая рамка над картинками - это наш border
Что показывает web developer. Красная линия - граница элемента div
DOM

HTML-код

Reveal hidden contents

<body>
    <div align="center">
        <p align="center">
            <input type="button" value="Назад" onclick="prevPhoto()">
            <input type="button" value="Вперед" onclick="nextPhoto()">
        </p>
        <img src="" alt="" id="photo"/>
    </div>
    <div id="galleryPreview">

    </div>

CSS-код

Reveal hidden contents
#galleryPreview{
width: 756px;
margin-top: 20px;
padding:10px;
border: 1px solid gray;
margin-left: 50%;
right: 378px;
position: relative;
}
#galleryPreview img{
width: 64px;
height: 64px;
margin: 10px;
float: left;
}

javascript-код, отвечающий за создание превьюшек

Reveal hidden contents


var divGalleryPreview = document.getElementById("galleryPreview");

            for(var i=0; i < Photos.length-1; i++)
            {
                var imgPreview = document.createElement("IMG");

                imgPreview.src = "img/"+Photos[i];
                imgPreview.onclick = onClickPreview;

                divGalleryPreview.appendChild(imgPreview);
            }

rus · April 18, 2012

#galleryPreview {
overflow: hidden;
}

maxmaster · April 18, 2012

On 4/18/2012 at 9:07 AM, rus said:
#galleryPreview {
overflow: hidden;
}

Спасибо. Но работает также и auto. Мне непонятно само поведение элементов img при не заданном overflow

Edited April 18, 2012 by maxmaster

Nanto · April 18, 2012

они у Вас "плавающие", то есть вырываются из "нормального потока", вот их родитель по высоте и схлопывается (до паддингов)

rus · April 18, 2012

On 4/18/2012 at 9:28 AM, maxmaster said:
Спасибо. Но работает также и auto. Мне непонятно само поведение элементов img при не заданном overflow

Nanto уже ответил.

auto не желательно, так как может появиться скролл.

Sign In

Помогите разобраться с border для div

Question

maxmaster

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

maxmaster

Link to comment

Share on other sites

Nanto

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information