CSS поплавок не будет работать

-1

У меня есть очень странное положение с помощью CSS на http://bit.ly/1Hwbn94 CSS поплавок не будет работать

Итак, я хочу, чтобы иметь красный DIV с названием (названием) правом зеленого поля с (позже скрытым) мобильным меню но эти два divs просто держат под собой друг друга.

Также было бы неплохо, если заголовок (и кнопка мобильного меню) будет центрирован по вертикали (сверху вниз).

Вокруг этих двух разделов есть ящик с логотипом, и я дал красный div правильное поплавок: слева; и также, я поставил более ясный после этих двух div.

CSS

#logo { 
    height: 80px; 
    width: auto; 
    font-family: Verdana, Helvetica, Arial, sans-serif; 
    margin: 40px 0 0 210px; 
    background: rgba(255, 255, 255, .93); 
    padding: 0; 
} 
#menue { 
    margin: 0 auto; 
    padding: 0; 
    width: 30%; 
    float: left; 
    background: green; 
} 
#titel { 
    width: 70%; 
    margin: 0 auto; 
    padding: 0; 
    text-align: right; 
    background: red; 
    overflow: hidden; 
} 
#titel span { 
    padding-right:48px; 
}

HTML

<div id="header"> 
    <div class="box"> 
    <div id="logo"> 
     <div id="menue"><img src="wp-content/themes/showcase-child/menue.gif" /></div> 
     <div id="titel"><h1><span><a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('title'); ?>"><?php if (get_option('photography_logo') <> "") { ?><img src="<?php echo get_option('photography_logo'); ?>" alt="logo" /><?php } else { ?><?php bloginfo('title'); ?><?php } ?></a></span></h1></div> 
     <div class="clearer"></div> 
    </div> 
    </div> 
</div>

Так что, я просто не понимаю, в то время как красная коробка не будет плавать рядом с зеленой коробке. Вы видите ошибку? Спасибо заранее, товарищи.

источник

2015-04-23 vega

Ну ты расположил ширину 100% зеленый и красный DIV, они не могут быть рядом друг с другом, если их ширина занимает 100% от родительского контейнера – Huangism

Нет, я установил его в ширину: 30% и ширину: 70%. – vega

У вас есть, но он переопределяется '#logo div', потому что он более конкретный, чем' # id'. Вы можете легко увидеть это с помощью инспектора – Huangism

Вы эти правила (не включены в первоначальный вопрос), нацеленных на все div сек в #logo контейнере:

#logo div { 
    height: 80px; 
    width: 100%; 
    float: left; 
}

Выньте width: 100%, и он будет работать нормально, на данный момент, как #menue и #titel100% широкий, поэтому они обертываются на две линии, а не на одном.

Кроме того, вы должны положить свой класс clearer после закрытия #logodiv вместо него.

источник

2015-04-23 14:47:23 martincarlin87

Но я установил #logo в ширину: auto; Где вы видите 100%? – vega

Посмотрите стили в строке 205 вашей таблицы стилей, и вы увидите ее. – martincarlin87

@vega '# logo' не соответствует' #logo div' – Huangism

Измените width:100% на width:50% в разделе #logo div вашего CSS.

У вас также есть ненужный float:left в пределах #logo div, и вы можете удалить width из #menue.

источник

2015-04-23 14:54:23

вынуть

width: 100%;

в вашем #logo DIV в style.css с линией № 205, и он будет Wrk штраф

источник

2015-04-23 14:57:44 Neelesh

CSS поплавок не будет работать

ответ

Смежные вопросы