Вертикально выровнять div относительно родного брата

Question

Вертикально выровнять div относительно родного брата

0

У меня есть форма, и я хочу отобразить текст справки. Иногда текст может быть немного длиннее. Я хочу установить фиксированную ширину в div, содержащий текст справки, и увеличить его по высоте. Затем, чтобы выровнять середину текста справки с относительным входом. Я гибкий со структурой HTML.

Это скрипка с формой и текстом справки.

CSS

.form-parameter { 
     display : block;
}
.form-parameter label , .form-parameter input { 
     width : 150px; 
     display : inline-block;
}

.form-parameter-helptext {
    width : 150px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.1s linear;
}
.form-parameter:hover .form-parameter-helptext { 
    visibility  : visible;     
    opacity: 1; 
}

Все, что я нашел до сих пор, это то, как выровнять div относительно родителя, но не брата.

haki 21 сен. 2013, в 20:17

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Shina · Answer 1 · 2013-09-22T07-27-00.000Z

Попробуй это:

.form-parameter-helptext {
    visibility: hidden;
    color: #333;
    background-color: #EEE;
    border: 2px solid lightblue;
    font-size: 13px;
    padding: 5px;
    margin-right: 10px;
    opacity: 0;
    -webkit-transition: opacity 0.1s linear;
    /* This is what I added */
    width:100px; // add the width
    position:absolute; // set the position to absolute
 }

Я не тестировал его ни на одном браузере, ни на веб-странице, но скрипка отлично работает.

Shirin Abdolahi · Answer 2 · 2013-09-21T15-58-00.000Z

Я устанавливаю ширину form-parametr в 530px и добавляю position:relative к ней, а для вашей помощи div добавляю position:abolute;right:0;top:0;width:200px насколько я знаю, вы не можете выровнять среднюю текста справки относительного ввода только с html и css, но я думаю, что это то, что вы хотите рядом с текстом справки: DEMO

и для записи вам нужно установить display:block этот div, когда вы хотите, чтобы ваша ширина работала, и вы хотите, чтобы помощь была невидимой, вы использовали visibility: hidden таким образом, вы просто скрыли этот div, но, как вы можете видеть там это пробел, который удерживает место для вашего текста справки, если вы хотите удалить это пробел, вы должны использовать display:none вместо него