div가 올바르게 확장되도록하기

저는 이것을 작동시키기 위해 생각할 수있는 모든 레이아웃 방법을 조사하는 데 지난 두 시간을 보냈습니다. 내가 함께 일하고 있어요 코드는 다음과 같습니다 :div가 올바르게 확장되도록하기

<!-- Begin Wrap --> 
<div id="wrap"> 

    <!-- Begin contentWrap --> 
    <div id="contentWrap"> 

    <!-- Begin statementDiv --> 
    <div id="statementDiv" class="transparent blackText"> 

     <p> 
     ART<br> 
     CULTURE<br> 
     F<span class="miniMargin">A</span>SHION<br> 
     THEBLACK<br> 
     COLLARWORKER<br> 
     </p> 

    </div> 
    <!-- End statementDiv --> 

<!-- Begin miniWrap --> 
<div id="miniWrap"> 

    <!-- Begin socialDiv --> 
    <div id="socialDiv" class="transparent marginRight"> 
    </div> 
    <!-- End socialDiv --> 

    <!-- Begin navButtons --> 
    <div id="navButtons" class="floatLeft"> 
      <img src="images/buttons/gallery.png" class="marginRight"> 
      <img src="images/buttons/blog.png"> 

     </div> 
     <!-- End navButtons --> 

    </div> 
    <!-- End miniWrap --> 

    <!-- Begin fillDiv --> 
    <div class="fillDiv transparent blackBG"></div> 
    <!-- End fillDiv --> 

    </div> 
    <!-- End contentWrap --> 

    <!-- Begin Footer --> 
    <div id="footer"> 

    </div> 
    <!-- End Footer --> 

</div> 
<!-- End Wrap -->

과 CSS는 다음과 같습니다

#wrap {height: 100%; width:100%; display: table;} 
#miniWrap {height: 41px; width: 362px; float: left; display: table-cell;} 
#navButtons {position: relative;height: 41px;float: left;} 
#contentWrap {position: absolute; bottom: 0; float: left; display: table-row;} 
#socialDiv {height: 41px;float: left;} 
#statementDiv {width: 365px; font-size: 42px; font-family: Arial Black, Gadget, sans-serif; line-height: .8; letter-spacing: -3px; display: table-cell;} 
.fillDiv {width: 100%;height: 41px;display: table-cell;} 
.miniMargin {margin: 0 -3px;} 
.marginRight {margin-right: 3px;} 
.floatLeft {float: left;} 
.blackText {color: #0d0601;} 
.blackBG {background: #0d0601;}

은 내가 실수로 디자인 더 세분화 한 너무 많은 레이아웃을 변경 앞뒤로 갔어요. 모든 팁이나 제안은 크게 감사하겠습니다.

내가 기대하고있는 것은 같은 수평선에 statementDiv, miniWrap 및 fillDiv가있는 것입니다. 두 개의 왼쪽 div는 정적 크기입니다. 세 번째 div (fillDiv)를 자동 확장하여 나머지 필요한 %를 채우고 싶습니다.

Auto는 div를 0으로 만들고 100 %는 div를 다른 div 아래로 떨어 뜨립니다. 내가 생각

출처

2011-08-09 Josh

레이아웃으로 무엇을 하려는지 구체적으로 설명해 주실 수 있습니까? 레이아웃에서 정확히 작동하지 않는 것은 무엇입니까? – AJC

죄송합니다! 메인 게시글 – Josh

을 업데이트 할 예정입니다.이 참조 정보는 http://www.w3.org/TR/css3-multicol/ 에서 확인할 수 있습니다. 한편 내가 필요한 것을 보여줄 수 있다고 생각합니다. – AJC

내 제안 : http://jsfiddle.net/7XPGa/

출처

2011-08-09 23:23:12 Johnny5

글을 올린 이후로 나는이 템플릿으로 주변을 둘러 보았습니다. 나는 너와 비슷한 결론에 도달했다. 다음은 현재 나와 함께있는 것입니다 : http://jsfiddle.net/7XPGa/1/. 일단 miniWrap div가 statementDiv와 약간 겹치는 문제를 해결합니다. 이 문제를 분명히 해결할 수 있을까요? – Josh

중복 된 문제가 해결되었습니다. 이것이 내 응용 프로그램에 가장 적합한 방법입니다. 감사! :) – Josh

jsfiddle은 당신이 찾고있는 무엇을 수행합니다 http://jsfiddle.net/gWPXF/

출처

2011-08-09 23:18:28 steveax

This 내가하려고했던 것보다 훨씬 더 깨끗한 방법 같아. divs가 일치하도록하는 주요 변경 사항 중 하나입니까? #contentWrap {위치 : 절대; 하단 : 0; 너비 : 100 %;} – Josh

은이 방법을 모르고 당신을 위해 작동하는지 확실히 말할 어렵습니다 어떤 사진이 어떤 원하는 최종 모양은 그렇지만 ...

.blackBG 클래스를 추가하고 #width를 100 %로 설정하여 #content에 검정색 배경을 배치 한 다음 #statementDiv 및 #miniWrap 배경을 지정합니다.

그래서 교장은 .fillDiv에서 보려는 배경색을 컨테이너에 제공 한 다음 컨테이너 내에있는 < div에서 재정의합니다. 단순히 공간을 색상으로 채우는 것처럼 보이기 때문에 .fillDiv를 제거 할 수 있습니다.

출처

2011-08-09 23:26:16

div가 올바르게 확장되도록하기

답변

관련 문제