Вложенные Div не укладываются должным образом - PullRequest
Новая
       2

Вложенные Div не укладываются должным образом

0 голосов
/ 27 февраля 2010

У меня проблема, и мне нужна помощь.

У меня есть несколько вложенных элементов div, которые выглядят хорошо - до тех пор, пока нет содержимого. После того, как я добавил тестовый текст, так как на страницах может быть много контента, между тегами div появился интервал. Вот ссылка на скриншот проблемы:

http://www.stephencamper.com/screenshot/screenshot.gif

... и вот как выглядит код: 

html, body {
     margin: 0; 
     padding: 0;
    }
    
    #wrap {
     width: 1024px; 
     margin: auto;
    }
    
    #header {
     width: 982px; 
     height: 98px; 
     margin: auto;
    }
    
    #body_container {
     width: 982px;
    }
    
    #top_inner_bg {
     width: 982px; 
     background: #FFF url(images/top_inner_bg.gif) no-repeat top; height: 9px;
    }
    
    #sides_inner_bg {
     width: 982px; 
     background: #CCC url(images/vert_inner_bg.gif) repeat-x top; /* img ht is 2000px; it's supposed to fade transp after 770px; no sure if correct way to do this */
    }
    
    #bot_inner_bg {
     margin: auto; 
     width: 980px; 
     height: 100%; 
     background: #E8E7E3;
    }
<div id="wrap">
    
     <!-- header -->
        <div id="header">
         header here
        </div>
    
     <!-- body -->
        <div id="body_container">
            <div id="top_inner_bg"> </div>
      <div id="sides_inner_bg"> 
       <div id="bot_inner_bg">
                 <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>               
                </div> 
            </div>
        </div>
    
    </div>

Я искал решение и нашел что-то при переполнении поля. Я попытался переполнение: скрытый; но это не сработало. Мои div тоже не плавают, поэтому у меня не работает clearfix. Когда я добавляю границу к элементам div, она работает, но теперь у меня есть граница, и я не хочу ее, поскольку мне нужно, чтобы боковые изображения плавно соединялись с div_ topner_b_bg.

Помогите пожалуйста!

Спасибо.

-Stephen

1 Ответ

0 голосов
/ 11 декабря 2016

Изображение, на которое вы ссылались, не работало, поэтому я предположил, что ваша проблема связана с количеством пробелов между заголовком и первым элементом p. Я исправил это, убрав высоту заголовка, из-за чего он занимал много пустого пространства, и я уменьшил нижнее поле, которое также добавляло пустое пространство. 

 html, body {
         margin: 0; 
         padding: 0;
        }

        #wrap {
         width: 1024px; 
         margin: auto;
        }

        #header {
         width: 982px; 
         /* Removed height: 98px; */
         margin: auto;
         /* added margin-bottom*/
         margin-bottom: -2%;
        }

        #body_container {
         width: 982px;
        }

        #top_inner_bg {
         width: 982px; 
         background: #FFF url(images/top_inner_bg.gif) no-repeat top; height: 9px;
        }

        #sides_inner_bg {
         width: 982px; 
         background: #CCC url(images/vert_inner_bg.gif) repeat-x top; /* img ht is 2000px; it's supposed to fade transp after 770px; no sure if correct way to do this */
        }

        #bot_inner_bg {
         margin: auto; 
         width: 980px; 
         height: 100%; 
         background: #E8E7E3;
        }
<div id="wrap">

         <!-- header -->
            <div id="header">
             header here
            </div>

         <!-- body -->
            <div id="body_container">
                <div id="top_inner_bg"> </div>
          <div id="sides_inner_bg"> 
           <div id="bot_inner_bg">
                     <p>test</p>
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>
                        <p>test</p>             
                    </div> 
                </div>
            </div>
        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...