형제에 상대적인 세로 정렬 div

양식이 있으며 도움말 텍스트를 표시하고 싶습니다. 텍스트는 때때로 조금 더 길 수도 있습니다. 도움말 텍스트를 포함하는 div에 고정 너비를 설정하고 높이에 맞게 자르고 싶습니다. 그런 다음 도움말 텍스트의 가운데를 상대 입력에 맞 춥니 다. 나는 HTML의 구조에 유연하다.형제에 상대적인 세로 정렬 div

양식과 도움말 텍스트가있는 fiddle입니다.

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; 
}

내가 지금까지 발견 사업부의 부모를 기준으로하지만 형제를 정렬하는 방법을 모든.

출처

2013-09-21 haki

어떤 브라우저 지원이 필요합니까? – Itay

당신은 HTML 구조에 대해 유연하다고 말합니다. 왜 [Bootstraps tooltips] (http://getbootstrap.com/2.3.2/javascript.html#tooltips)로 가지 않을까요? –

당신은 툴팁을 세로로 가운데 놓기 위해 자바 스크립트가 필요할 것입니다. 폼 레이아웃을 엉망으로 만들지 않도록 절대 배치하고 싶다고 가정합니다. 나는 이것이 당신이 CSS 접근 방식으로 얻는 것만 큼 좋다고 믿는다 : http://jsfiddle.net/koala_dev/Wvb29/11/ –

나는 530px에 form-parametr의 폭을 설정하고 그것에 position:relative을 추가하고, 당신은 HTML과 CSS와 상대 입력 도움말 텍스트의 중간 정보를 정렬 할 수 없습니다 알고 당신의 도움에의 div 나는 지금까지 position:abolute;right:0;top:0;width:200px 를 추가 하지만이 도움말 텍스트 옆에 원하는 내용이라고 생각합니다. DEMO

너비를 작동 시키려면이 display:block을이 div로 설정해야하며 보이지 않게하려면 도움말을 참조하십시오. visibility : hidden이 방법을 사용하면 방금 div를 숨기지 만 도움말 텍스트를 저장할 수있는 공백이 있음을 알 수 있습니다. 공백을 제거하려면을 사용해야합니다. (210) 대신

출처

2013-09-21 18:02:55

이 시도 :

이

.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 
}

내가 어떤 브라우저 나 웹 페이지를 테스트하지 않았지만 바이올린은 잘 작동합니다.

출처

2013-09-22 09:15:12 Shina

형제에 상대적인 세로 정렬 div

답변

관련 문제