Как работать с изображениями с помощью DIV Float и inline - PullRequest
1 голос
/ 22 января 2011

У меня есть проблема с обработкой изображений на div.У меня есть три разных изображения, одно наверху страницы, внизу страницы и среднее изображение, которое должно повторяться на его "у".Все уже организовано.Моя проблема заключается в том, что я хотел, чтобы высота нижнего изображения соответствовала содержанию в нем (содержимое находится на строчке div с плавающей точкой слева - это должно быть содержимое из двух столбцов) Но нижнее изображение не будет следовать, если я добавлюсодержимое на float осталось, а когда не в этом состоянии, все в порядке.Эта проблема уже сводит меня с ума.Может ли кто-нибудь здесь помочь?

Большое спасибо!

Вот структура кода ...

<div id="topBackground">
<div id="bottomBackground">
<div id="page">
    <div id="content">
        <div id="main">
            <div id="mainTopBg">    
                <div id="mainContent">

                    <div id="leftCol">
                    </div>

                    <div id="sidebar">        
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--/content -->

</div>
    <!--/page -->
</div>
</div>

CSS К ним относятся:

#page {
    margin:0 auto 0 auto;   
    width: 900px
}

#content {
    padding-top: 140px;
}

#topBackground {
    background:url(images/wrap_bgTopUtensils.png) top center no-repeat;
    width:100%;
}

#bottomBackground {
    background:url(images/wrap_bgBottomUtensils.png) bottom center no-repeat;
    width:100%;
}

#main {
    background:url(images/main_bgRepeat.gif) repeat-y;
    width:900px;
}

#mainTopBg {
    background:url(images/main_bgTop.gif) top no-repeat;
}

#mainContent {
    background:url(images/main_bgBottom.png) bottom no-repeat;
    min-height:935px;
    width:840px;
    padding:50px 30px;
}

#leftCol {
    display:inline;
    float:left;
}

#leftCol p {
    margin-bottom:10px;
    margin-top:10px;
    line-height:20px;
}

#leftCol h2 {
    margin-bottom:10px;
    margin-top:10px;
    font-size:35px;
}

#sidebar {
    display:inline;
    float:right;
    width:340px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...