요소를 숨긴 후 정렬 (들여 쓰기)하는 방법

Question

3 개의 링크 버튼이 있으며 그 중 2 개는 숨겨져 있습니다. 그리고 다른 버튼을 클릭하면, 나는 숨겨진 것들을 숨기고 보이기를 숨기고 싶습니다.

그러나 보이지 않는 부분이 보이면 새로 보이는 부분이 보이지 않게됩니다. 사라진 사람의 공간을 차지할 권리에 어떻게 정렬 할 수 있습니까?

내 링크는 다음과 같은 것이 있습니다.

.title_tools#area1{:style => "visibility: visible;"} 
    = link_to_inline(:create_ins, new_ins_path, :text => t("Create new instance"))#link1 

.title_tools#area2{:style => "visibility: hidden;"} 
    = link_to "Sync", "cat/sync", :remote=>true#link2 
    = link_to "Open", "cat/open", :remote=>true#link3 

그리고 난 document.getElementById를 ('AREA2') style.visibility = '볼' "< < 페이지"에 의해/숨기기 취소를 숨길; "내 .의 .js 파일

그래서 처음에는 다음과 같습니다

_______ _______ {link1} 

버튼을 클릭 한 후에는 다음과 같습니다

,

{link2} {link3} _______ 

그러나 그것이 있어야 :

_______ {link2} {link3} 

내가 어떻게 달성 할 수 있습니까? 감사합니다

Answer 1

는

.title_tools#area2{:style => "visibility: hidden;position:fixed;left:30px;"} 

변경에게 이제까지 U이 필요로 얼마나 많은에 왼쪽 값을보십시오.

Answer 2

visibility 속성을 사용하면 항목이 표시되지만 보이지 않습니다. display 속성이있는 모든 항목이 none이 아닌 흐름에 있으며 필요한 공간을 차지합니다.

두 솔루션 : 당신이 링크 1을 숨길 때

1. 시도는 display: none 추가 할 수 있습니다.

2. 또는 모두 표시하고 (visibility: visible) CSS를 올바르게 배치하고 (link1을 오버레이 link3해야 함) 가시성을 다시 설정하십시오.