DIV сбрасывается, даже переполнение скрыто

enter image description here У меня есть заголовок, он состоит из двух частей, слева - большой пастилки, справа - кнопки управления. Проблема - когда breadcrumb становится слишком длинной, правая часть падает, но я хочу скрыть панировочные сухари, не все, но ту часть, которая покрывает кнопки. Ниже изображение с короткой навигационной цепочке enter image description here DIV сбрасывается, даже переполнение скрыто

В настоящее время родительский DIV является

width: auto; 
text-align: left; 
margin-left: 61px;

Иерархическая является

display: inline-block; 
text-align: left; 
width: auto; 
max-width: 60%; 
overflow: hidden; 
white-space: nowrap;

И правая кнопка часть

z-index: 99999; 
float: right; 
display: inline-block;

Я не знаю, почему правая часть сбита, я хочу просто спрятать bre adcrumb, также не может разрешить его в инструменте chrome dev. Это то, что я хочу, enter image description here Может быть, есть небольшой трюк, заметил много вариаций css display, любые идеи?

Crappy демо:http://jsfiddle.net/a796joeq/

источник

2014-11-04 Medet Tleukabiluly

Может вам дать немного скрипки lin k .. так что мы можем исправить как можно скорее? –

Я предлагаю это для «правой кнопкой части»:

z-index: 99999; 
position: absolute; 
right: 0px; 
top: 0px; 
display: inline-block;

источник

2014-11-04 04:46:44 phpenthusiast

Ваше решение неверно, вот вилка http://jsfiddle.net/qdz83oww/ –

[link] (http://jsfiddle.net/qdz83oww/1/) Я добавил существенное «право: 0px;» часть определения, и теперь он отображает вашу спецификацию (в моем браузере). – phpenthusiast

работает! Спасибо чувак.Мысль «позиция: абсолютная» - это плохая привычка, но теперь кажется, что только путь –

Попробуйте следовать правильной концепции, так что вы можете поставить качество продукции.

Для достижения этой цели вы можете использовать концепцию float. Для лучшего понимания вы можете использовать ширину изначально.

Для использования родительским подразделением: 100%; Для ребенка дивы использования: 50%, 50% (всего может быть не более 100%)

Вот скрипка (http://jsfiddle.net/kiranvarthi/ybt5tc8b/3/) из ниже:

.parent { width: 100%; background: green; overflow: hidden; } 
.child1 { width: 30%; float: left; color: #fff; } 
.child2 { width: 30%; float: left; color: #fff; }

HTML

<div class="parent"> 
    <div class="child"> 
    Child 1 content comes here. 
    </div> 
    <div class="child"> 
    Child 2 content comes here. 
    </div> 
</div>

источник

2014-11-04 04:47:49

Я хочу скрыть левую часть и не хочу зависеть от ширины правой части, так как оба они генерируются динамически. http://jsfiddle.net/mp6gr204/ правая часть спряталась, но мне нужно, чтобы левая часть была скрыта, обратите внимание: кнопки и палитра динамически генерируются угловыми директивами –

Я обновил скрипку. http://jsfiddle.net/kiranvarthi/mp6gr204/1/. Проблема здесь выглядит как свойство Max-Width. –

Хорошо, что, если breadcrumb get's long, но кнопки управления не будут отображаться для гостя, он будет все еще на 50%, хотя заголовок отверстия пуст, возможно, некоторые улучшения могут быть сделаны? –

в проблема в том, что вы margin-left на родительском div. Измените его на процент

источник

2014-11-04 04:49:21 CodeGodie

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

Подари позиции для Div годов:

Parant Div:

position:relative;

Breadcrumb:

position:absolute;

источник

2014-11-04 05:09:22 nanbatman

Добавить медиазапросы:

@media screen and (max-width: 800px) { 
    .breadcrumb { 
    max-width: 50%; 
    } 
} 
@media screen and (max-width: 750px) { 
    .breadcrumb { 
    max-width: 40%; 
    } 
}

источник

2014-11-04 05:13:31 CodeGodie

DIV сбрасывается, даже переполнение скрыто

ответ

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