Изображение выталкивается за пределы div, завернутого в

0

Нобелевскую премию человеку, который может понять, почему второе изображение выталкивается за пределы его обернутого.

Я думал, что то, что я сделал, было довольно просто:

<div class="outerdiv" id="headerbox">
    <div id="uwlogo">
        <img src="uwlogo.png" height="50px"\>
    </div>
    <div id="JaminWEB">
        <h1>JaminWEB</h1>
    </div>  
    <div id="rainer">
        <img src="rainer.jpg" height="50px"\>
    </div>
</div>

с соответствующим кодом таблицы стилей

#uwlogo
{
    float: left;
}

#JaminWEB
{
    float: center;
}
#rainer
{
    float: right;
}
h1
{
    color: #FFF;
    font-weight: 400;
    text-align: center;
    margin: auto;
    padding: auto;
}

Ссылка JFiddle, так как я знаю, кто-то запросит одно: http://jsfiddle.net/u7PJj/

  • 0
    используйте text-align: center; вместо поплавка: центр;
  • 0
    Вы упомянули неправильный закрывающий тег, который может быть проблемой, попробуйте следующий формат
Теги:

2 ответа

2
Лучший ответ

Чтобы ответить, почему это происходит, есть ряд вещей:

  1. float: центр недействителен, поэтому он не плавает
  2. Ваш #JaminWeb занимает 100% -ную ширину, заставляя ваш третий плавающий элемент (rainer) обертывать и плавать вправо (на следующей строке)
  3. Ваш заголовок установлен на высоту 50 пикселей, а float не изменяет эти размеры, поэтому он, кажется, плавает за пределами своего контейнера.

Чтобы исправить это, я предлагаю использовать абсолютное позиционирование вместо плавающего. Таким образом, ваш div JaimenWEB может быть центрирован и иметь полную ширину, и логотипы будут размещены вокруг него.

#headerbox
{
    width: 80%;
    height: 50px;
    position: relative;
}
#uwlogo
{
    position: absolute;
    left: 5px;
    top: 5px;
}

#JaminWEB
{
    text-align: center;
}
#rainer
{
    position: absolute;
    right: 5px;
    top: 5px;
}

Я обновил вашу скрипку: http://jsfiddle.net/u7PJj/1/

0

Попробуй это

<div id="uwlogo">
        <img src="uwlogo.png" height="50px" />
    </div>
<div id="rainer">
        <img src="rainer.jpg" height="50px" />
    </div>
<div id="JaminWEB">
        <h1>JaminWEB</h1>
    </div>  

Ещё вопросы

Сообщество Overcoder
Наверх
Меню