javascript를 사용하지 않고 다양한 높이의 부동 div 안에 폼을 세로로 가운데 맞추는 현대적인 방법은 무엇입니까?

내가하려는 일 :javascript를 사용하지 않고 다양한 높이의 부동 div 안에 폼을 세로로 가운데 맞추는 현대적인 방법은 무엇입니까?

양식을 왼쪽 div에 세로 가운데 놓습니다. 해당 div의 높이는 오른쪽 div의 높이에 따라 달라지며 여기에는 포함 된 텍스트에 따라 변경 될 수 있습니다.

내가 원하는 무엇 :

자바 스크립트를 사용에 의존하지 않는 현대적인 솔루션입니다. JavaScript가없는 많은 접근 방식이 있지만 플로팅 div 및 동적 높이를 고려하자마자 목록이 크게 줄어 듭니다. 아직까지는 실용적인 솔루션을 찾지 못했지만, 현대적인 솔루션은 찾지 못했습니다. 여기

는 jsfiddle이다 (그러나 나는 원시 코드를 사용하는 것이 좋습니다) :

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 

     <style type="text/css"> 
      body 
      { 
       margin: 10px; 

       padding: 10px; 

       background: #293134; 
       color: #E0E2E4; 

       border: 1px solid #93C763; 
      } 

      #container 
      { 
       overflow: hidden; 

       width: 800px; 

       margin: 0 auto; 

       padding: 10px; 

       border: 1px solid #678CB1; 
      } 

      #left 
      { 
       float: left; 

       width: 568px; 

       padding: 10px; 

       border: 1px solid #FFCD22; 
      } 

      #right 
      { 
       float: left; 

       width: 200px; 

       margin-left: 10px; 

       padding: 10px; 

       border: 1px solid #EC7600; 
      } 

      #container, #left, #right 
      { 
       box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="container"> 
      <div id="left"> 
       <form> 
        <input type="text" name="keyword" required placeholder="keyword" /> 

        <input type="submit" value="search" /> 
       </form> 
      </div> 

      <div id="right"> 
       <h1>foo</h1> 
       <h2>bar</h2> 
       <h3>baz</h3> 
      </div> 
     </div> 
    </body> 
</html>

Hindsights :

pshpV

원시 코드의를 에이 내가 아는 한, 테이블 접근법이 작동하는 유일한 방법은 수레를 제거하는 것입니다. 나는 또한 분명히 수레가 필요조차하지 않는 것으로 보인다. 어쨌든, 나는 아직도 내 질문에 대한 답을 찾고 싶다.

출처

2011-08-29 Fake Code Monkey Rashid

정확히 모든 것을 원하지만 테이블/테이블 셀을 세로로 정렬 한 다음 디스플레이를 놀래켜 볼 수도 있습니다. 그러나 IE에는 이러한 속성에 문제가 있습니다. < = IE7이라고 생각합니다.

편집 : 나는 여기 사지에 나가서 당신의 요구가 불가능하다고 말합니다. 문제는 결합 플로팅 및 동적 높이를 요구하는 두 가지 요구 사항에서 비롯됩니다.

요소를 플로팅한다는 것은 상위 요소를 플로팅 한 경우에도 상위 요소가 높이를 인식하지 못함을 의미합니다. 그러나 부동 요소 높이까지 늘어나지 만 인식 된 높이는 유지되지 않습니다. 따라서 높이를 인식하지 못하므로 상단 : 50 %로 상대적으로 위치를 잡는 것과 같은 중앙 맞춤 방식을 시도하는 것이 효과가 없습니다.

모든 경우에 문제의 요소의 실제 높이가 부동이므로 인식되지 않습니다. 이 문제를 해결하기 위해 상위 요소에 대한 높이를 지정해야합니다. 동적 인 높이 (Dynamic Height)의 또 다른 요구 사항이므로이 경우 문제가 해결되지 않습니다.

출처

2011-08-30 00:16:00 Psyrus

이전에 이것을 실험했기 때문에 플로트를 제거해야만 작동 할 수있었습니다. –

수정 된 답변보기 – Psyrus

+1 : 수정 된 답변으로 문제가 해결되었습니다. –

javascript를 사용하지 않고 다양한 높이의 부동 div 안에 폼을 세로로 가운데 맞추는 현대적인 방법은 무엇입니까?

답변

관련 문제