Плавающие плаценты

Question

Проблема:

Я бы хотел, чтобы котенок появился после ввода.

Боюсь, что ввод должен быть корректным, и это нельзя изменить.

Кроме того, порядок HTML нельзя изменить , так как этот ярлык автоматически генерируется и вводится после моего ввода.

Я также хотел бы сохранить все 3 из этих элементов, чтобы остатьсяв одну строку.

Пример Live:

HTML:

<label class="first">Organization : </label>

<input name="organization" id="organization" type="text">

<label class="error" generated="true"><img src="http://placekitten.com/20/30" title="This field is required" ></label>

CSS:

label.first {
    float: left;
    clear: left;
}

input {
    width: 200px;
    float: right;   
}

label.error {
    float: right;
}

Answer 1

Обновлено: для каждого изменения в вводе фиксированной ширины,

все еще оставьте правое поле на входе, затем поместите котенка в пространство - нужен контейнер "row" div

Обновленный пример здесь

---

Рабочий пример

.first {
    float: left;
}

input {
    width: 200px;
    float: right;
    margin-right: 25px;    /* enough for kitten */
}

.error {
    float: right;
    right: -230px; /* input width + kitten width + any margin */
    position: relative;
}

Я тоже пробовал поля для .error div, но IE это не понравилось, но относительное позиционирование, похоже, помогает

Answer 2

Использовать абсолютное позиционирование ... (если необходимо): P

Answer 3

изменить порядок применения плакиттена и ввода.

Answer 4

ответ clairesuzy довольно хороший, но он ведет себя странно, когда кадр слишком мал, чтобы отображать поле ввода + вместе. Вероятно, не большая проблема, но если это так, попробуйте это:

Добавьте следующие свойства в класс div.error:

clear:right;
margin-top:-1em;

И затем добавьте следующее к элементу ввода:

margin-right:20px;  

Рабочий пример

Answer 5

Переместить плаценты перед вводом.Также .. почему это нужно плавать правильно?и вам не следует использовать псевдо-селекторы, если вы хотите "устаревшую" поддержку.

http://jsfiddle.net/SVctE/15/