Неожиданная высота

Question

Неожиданная высота

0

Я создал заголовок в html/css. Неожиданная высота приходит в menuOne. Как избавиться от этой высоты. ясно: оба также я добавил. Любой, пожалуйста, предложите мне, где я сделал неправильно.

HTML:

<div class="logo">
    <img src="http://dummyimage.com/140x60/000/fff" />
</div>
<div class="rightContent">
    <div class="menuOne">
        <div class="fLeft">LeftContent</div>
        <div class="fRight">RightContent</div>
        <div class="cBoth"></div>
    </div>
    <div class="menuTwo">Second menu will come here</div>
</div>

и CSS:

.fLeft {
    float:left
}
.fRight {
    float:right
}
.cBoth {
    clear:both
}
.logo {
    float:left;
    border:1px solid red
}
.rightContent {
    margin-left:150px;
    border:1px solid blue
}
.menuOne {
    background-color:#ccc
}
.menuTwo {
    background-color:#333;
    color:#fff
}

Смотрите скрипку: http://jsfiddle.net/fLZHq

благодаря

Pavan Kumar 18 дек. 2013, в 07:45

Источник

1

Можете ли вы предоставить скриншот того, как вы хотите и что неожиданно создает проблему?
Nitesh 18 дек. 2013, в 06:26
0

Я не дал никакой высоты, отступов и полей в menuOne. MenuTwo должен зафиксировать нижнюю часть menuOne. Дополнительный серый цвет означает, что при достижении некоторой высоты высота кажется равной высоте изображения.
Pavan Kumar 18 дек. 2013, в 06:29

Теги:

html

css

3 ответа

0

Все проблемы с css относительно макета страницы можно найти с помощью трехмерного представления, доступного в Firefox.

Вы использовали float слева для изображения и не использовали float для div rightContent. Таким образом, изображение перекрывает ваш div "rightContent". Вот почему вам нужно было оставить маржу слева для div "rightContent".

Итак, как только вы дадите float: слева для div "rightContent", неожиданная проблема будет решена.

ethan 18 дек. 2013, в 05:39

0

Попробуй это

.rightContent {
    margin-left:150px;
    float: left;
    border:1px solid blue
}

Sridhar R 18 дек. 2013, в 04:24

Ещё вопросы

Можете ли вы предоставить скриншот того, как вы хотите и что неожиданно создает проблему?
Я не дал никакой высоты, отступов и полей в menuOne. MenuTwo должен зафиксировать нижнюю часть menuOne. Дополнительный серый цвет означает, что при достижении некоторой высоты высота кажется равной высоте изображения.

Aziz Shaikh · Accepted Answer · 2013-12-18T04-06-00.000Z

Изменение clear:both clear:right исправляет это.

.cBoth {
    clear:right;
}

Демонстрация первого подхода: http://jsfiddle.net/fLZHq/3/

clear:both подталкивают элемент ниже всех предыдущих элементов с плавающей точкой (это включает в себя логотип div в вашем случае). В то время как clear:right только подталкивает его под элементом с правопорядком, который вы хотите.

Второй подход заключается в том, чтобы сохранить rightContent clear:both но плавать ваш rightContent и удалять левое поле, например:

.rightContent {
    float:left;
    border:1px solid blue
}

Демонстрация второго подхода: http://jsfiddle.net/fLZHq/7/

Почему я должен дать ясно: правильно. ясно: оба, он очищает влево и вправо. как понятно: правильно здесь работает?
clear:both нажимают на menu2 под logo . Помните, что logo также всплыл влево. В то время как clear:right menu2 ниже menu1