반응 형 레이아웃에서 수직 방향으로 2 div를 확장하는 방법은 무엇입니까?

나는 내 질문을 게시하기 전에 관련 질문을 보았 기 때문에 매우 일반적인 질문을 던질 것이라고 믿는다. 그러나 이것은 약간 다르다. 일반적으로 수직으로 2 div를 확장 할 때 어떤 문제도 발생하지 않지만 지금은 부트 스트랩 프레임 워크를 사용하는 응용 프로그램에서 작업하고 있습니다. 유동적 인 레이아웃이기 때문에 나는 어떤 문제에 직면하고 있습니다. 해결책을 제안하십시오. 이것은 내가 사용하는 것입니다 :반응 형 레이아웃에서 수직 방향으로 2 div를 확장하는 방법은 무엇입니까?

HTML :

<div class="main"> 
    <div class="left">content</div> 
    <div class="right">content</div> 
</div>

CSS :

.left{ 
    position:absolute; 
    left:0px; 
    border-right:1px solid #bfc4c9; 
    background:#ebf2f9; 
    width:280px !important; 
} 

.right{ 
    display:block; 
    float:left; 
    position:relative; 
    padding-right:9px; 
    margin-left:300px; 

}

내가 수직으로 모두 좌우 된 div를 정렬 할 수 있습니다. 내용은 오른쪽 div로 이동하므로 오른쪽 패널의 높이로 왼쪽 패널 높이를 늘려야하고 유체 레이아웃이므로 왼쪽 패널 너비 만 고정되어 오른쪽 패널의 너비를 정의 할 수 없습니다.

http://jsfiddle.net/ArbVp/

가 상대적인 위치로 주요 사업부를 필요로하고, 명확한이 열 아래에 추가 :

출처

2012-09-18 Imran Abid

안녕하세요 이므 란 당신이 당신이 필요로하는 것을 가지고 내 사이트로 이동 할 수 있습니다합니다. http://net4.ccs.neu.edu/home/dhruven. 그것은 그 페이지 자체에 필요한 것입니다. CSS를 사용하는 것만으로는 어렵습니다. JS를 사용할 수 있습니까? –

CSS로 처리 할 수 있다면 좋을 것입니다. JS가 necassary 인 경우 사용할 수 있지만 JS에 대한 명령이 없습니다. 또한 나에게 제안한 웹 사이트는 고정 레이아웃입니다. 유체 레이아웃에 세로 div를 정렬하고 싶습니다. 특정 폭을 정의하고 싶지 않습니다. –

절대 위치 지정 ... 중요한 고정 폭 ... 유체 배치는 어디에 있습니까? 당신이 그것을 유지하고 싶다면 다른 해결책을 찾아야한다고 생각합니다. 또는이 방법을 계속 사용하려면 트위터 부트 스트랩이 그런 종류의 스타일과 호환되지 않는다는 것을 명심하십시오. – albertedevigo

절대 위치 사용 - - 위, 아래, 왼쪽, 오른쪽 왼쪽 열에는 작동하는 것 같다 .

출처

2012-09-19 15:33:09 DBUK

감사합니다. –

우물, 좋은 좋은 :) – DBUK

@DBUK :
때문에 난 당신의 게시물에 댓글을 추가 할 수 없습니다 충분한 명성 포인트를 가지고 있지합니다.
나는 당신의 바이올린 업데이트 한 :이 경우 http://jsfiddle.net/ArbVp/50/

그것을 어떤 식 으로든 '플로트'를 사용하는 절대적이 켜지지 없습니다. 다른 CSS 값은 "불필요한"...입니다! ;-)

건배
군터

출처

2013-08-31 14:53:43 Netsurfer

반응 형 레이아웃에서 수직 방향으로 2 div를 확장하는 방법은 무엇입니까?

답변

관련 문제