Как использовать всю область содержимого с эффектом раздвижных дверей css? - PullRequest
Новая
       27

Как использовать всю область содержимого с эффектом раздвижных дверей css?

1 голос
/ 11 февраля 2012

Я использую эффект раздвижных дверей, чтобы показать поле с переменной шириной.Эффект работает нормально, но проблема в том, что право заполнения, необходимое для создания эффекта, съедает часть области содержимого:

http://screencast.com/t/s9dTT1wU

Мне нужно, чтобы мой контент прошел всепуть от левого края графика к правому краю.Я должен поддерживать старый IE, поэтому я не могу использовать отрицательные поля и не могу использовать текстовый отступ, потому что мне нужен полный HTML-контент внутри, а не только текст.CSS: 

.Quote.Outer
{
    float: left;
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutRight.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 50px;
    height: 81px;
}

.Quote.Inner
{
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutLeft.png);
    background-position: left center;
    background-repeat: no-repeat;
    height: 81px;
    outline: solid 1px hotpink;
}

и разметка: 

<div class="Quote Outer">

    <div class="Quote Inner">html content here</div>

</div>

Я с удивлением обнаружил, что никто не обсуждает этот недостаток раздвижных дверей.Есть ли разумное кросс-браузерное решение для этого?

1 Ответ

1 голос
/ 11 февраля 2012

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

ДЕМО ЗДЕСЬ

Или добавьте отступ к внутреннему div:

ДЕМО ЗДЕСЬ

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

ДЕМО ЗДЕСЬ

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

...