Как настроить div для изменения размера, чтобы он содержал внутренние div? - PullRequest
Новая
       13

Как настроить div для изменения размера, чтобы он содержал внутренние div?

0 голосов
/ 27 июля 2011

Этот вопрос вызван очень неприятной проблемой, которая, как мне кажется, является темой всей моей веб-разработки.

У меня есть пример этой темы, чтобы дополнить мое объяснение. У меня есть заголовок на моем сайте, и ниже этого заголовка я хочу панель навигации, довольно стандартную. Вы можете увидеть это на http://www.ethoma.com/testhome.php. Заголовок - это единственный тег img на странице, который легко увидеть. Вот базовая структура HTML и CSS для этой части страницы. 

<div class="container" onclick="hide();">
    <div class="hhshomehead">
    <div class="logowrap">
    <center>
        <img src="/ETPbrand.gif" />
    </center>
        </div>
        <div id="homeopt">
             <ul id="homeoptlist">
             <li id="homeoptnewpost">
         <a class="homeoptanchor" href="/hhsplus_create.php">
            New Post
         </a>
         </li>
         </ul>
         </div>
    </div>
    ...... more html .....
</div>

И CSS: 

.hhshomehead
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    background-color:#ffffff;
    -moz-box-shadow: 3px 3px 3px #aaa;
    -webkit-box-shadow: 3px 3px 3px #aaa;
    box-shadow: 3px 3px 3px #aaa;
    width:100%;
    border-radius:10px;
}

.hhshomebody
{
    min-height:75%;
    width:100%;
}

.logowrap
{
    display:inline;
}

.homeopt
{
    padding-top:8px;
    padding-bottom:8px;
    padding-left:8px;
    padding-right:8px;
    width:100%;
    border-radius:10px;

}

.homeoptlist
{
    display:inline;
    list-style-type:none;
    float:left;
    margin-top:0px;
    margin-bottom:0px;
    padding-left:0px;
}

.homeoptanchor
{
    text-decoration:none;
    color:#1515b5;
    padding-bottom:3px;
    padding-top:3px;
    padding-right:3px;
    padding-left:3px;
}

.homeoptanchor:hover
{
    text-decoration:underline;
}

Я знаю, что нотация класса и идентификатора не подходит для CSS и HTML. Я изменил его, чтобы правильно отображать в этом посте. Если вы посмотрите на полученный код в firebug, то увидите, что класс hhshomehead, похоже, содержит изображение логотипа, но не полосу под ним. Я не знаю, есть ли какой-то критический элемент, который мне не хватает, потому что из моего ограниченного опыта, если у тега есть дочерние элементы, дочерние теги должны содержаться в родительском теге. Спасибо всем, кто нашел время, чтобы посмотреть или ответить на этот вопрос - все здесь всегда очень полезны. (Извините, если код не отображается правильно, я разместил здесь только один раз)

1 Ответ

1 голос
/ 27 июля 2011

На сайте вы ссылаетесь на список #homeoptlist floated , который удаляет его из потока документов.Чтобы родительские div (ы) расширились и содержали его, вам необходимо «очистить» float, что можно сделать, применив clearfix к родительскому элементу.См. Какие методы «clearfix» можно использовать?

...