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

#jquery #html #css #positioning

#jquery #HTML #css #позиционирование

Вопрос:

Я должен отделить фон кнопки от родительского элемента по причинам, связанным с особенностями настройки tumblr.

Вот html:

 <a href="link">
    <div class="innerNest"> //I'm guessing we need this to bring the two divs to T:0 L:0
        <div class="buttonText">{tumblr variable}</div>
        <div class="buttonBG"></div>
    </div>
</a>

Это css, с которым я застрял, по крайней мере, для тега:

 a{
    display: inline-block;
}

Я сделал очень описательный jsfiddle здесь: http://jsfiddle.net/hVuaf/35 /

ПРИМЕЧАНИЕ: нетрудно просто сделать так, например (встроенный CSS для демонстрационных целей):

 <a href="link" style="background-color:#fff;display:inline-block">Link</a>

Но я просто не могу, это связано с тем, что я хочу контролировать переменные, назначенные цветами в настраиваемых темах редактирования Tumblrs. В основном он поддерживает цвета для холмов, но мне нужно работать с rgba, а не #, поэтому мне нужно разделить компоненты кнопки.

Спасибо.

1. Почему вы не можете этого сделать <a href="link" style="background-color:rgba(255,255,255,0.5); display:inline-block">Link</a> ?

2. Я не могу, потому что мне нужно разделить значения фона и переднего плана из-за проблемы с настройкой настроек темы в tumblrs. Поверьте мне, если бы я мог, я бы это сделал. Я знаю, похоже, что я здесь новичок, но факт в том, что мне нужно полностью отделить фон от текста.

3. Что вы подразумеваете под «разделением значений»?

Ответ №1:

Это то, что вам нужно?

http://jsfiddle.net/cdj2L/

По сути, я установил привязку к position:relative, а затем текст внутри просто стандартный. Тогда фон, который я установил в абсолютное значение, а ширина / высота — 100%, заполняя якорь. Наконец, z-индекс сортирует слои.

Надеюсь, это поможет 🙂

1. Хорошее решение, если требуются два div внутри <a> .

2. Большое спасибо, что вы делаете, когда получаете два правильных ответа? mrtsherman поставил зеленую галочку только из-за уменьшения divs.

3. Ах, не беспокойтесь, я думал, вам нужно сохранить эти div по какой-то причине в tumblr. Если вы можете удалить это, почему бы просто не иметь один div внутри (или span, я по какой-то причине предпочитаю использовать spans) и просто изменить его?

Ответ №2:

Это то, что вы ищете? Я удалил элемент bg и просто использовал контейнер для установки фона.

 <a href="link">
    <div class="inlineNest">
        <div class="btText">Link</div>
    </div>
</a>

.inlineNest {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(255,0,0,0.5);
}

.btText {
    padding: 5px;
}

http://jsfiddle.net/mrtsherman/hVuaf/43/

Ответ №3:

Можете ли вы сделать это: http://jsfiddle.net/hVuaf/45 /