너비 백분율 사용이 작동하지 않습니다.

그래서 표 셀을 올바른 너비에 맞출 수 없습니다. 누구든지이 문제에 대해 저를 도울 수 있습니까? 폭 비율을 변경해도 아무 것도하지 않는 것 같습니다. 어떤 충고라도 잘 될 것입니다. 감사.너비 백분율 사용이 작동하지 않습니다.

<html> 
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;"> 
    <div style='display : table; width : 100%; height : 100%'> 

     <div style='display : table-row; width : 100%; height : 70%;'> 
      <div style="height:70%; width:40%; border:solid; display : table-cell;"> 
       blah 
      </div> 
      <div style="height:70%; width:60%; border:solid; display : table-cell;"> 
       kah 
      </div> 
     </div> 

     <div style='display : table-row; width : 100%; height : 30%;'> 
      <div style="height:30%; width:100%; border:solid; display : table-cell;"> 
       hah 
      </div> 
     </div> 

    </div> 
</body> 
</html>

출처

2014-02-25 ctng1213

나는 당신이 서로 나란히 정렬하고 싶다고 생각합니다. 그러나 문제는 셀을 다른 테이블 행에 쓴 것이므로 줄 단위로 보여줍니다.

그런 다음 또 다른 문제가 있습니다. div와 함께 colspan을 인라인 스타일로 사용할 수는 없지만 2 열 너비로 hah를 작성해야합니다. 그래서 다른 테이블로 분리해야합니다.

최종은 다음과 같이해야합니다 :

<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;"> 
    <div style='display : table; width : 100%; height : 70%'> 

     <div style='display : table-row; width : 100%; height : 70%;'> 
      <div style="height:70%; width:40%; border:solid; display : table-cell;"> 
       blah 
</div> 
      <div style="height:70%; width:60%; border:solid; display : table-cell;"> 
       kah 
      </div> 
     </div> 
    </div> 
     <div style='display : table; width : 100%; height : 100%'> 
     <div style='display : table-row; width : 100%; height : 30%;'> 
      <div style="height:30%; width:100%; border:solid; display : table-cell; colspan:2;"> 
       hah 
      </div> 
     </div> 

    </div>

출처

2014-02-25 07:17:28 Kuzgun

당신은 당신이 셀 div의 인라인 블록을 사용하여 원하는 레이아웃을 달성 할 수 비율 크기가 작동 및 디스플레이 사용하지 않도록 : 테이블에 상응하는이 없기 때문에 CSS 테이블의 colspan 셀의 높이는 100 %이어야 부모 행 높이의 100 %가됩니다. 우리는 또한 상자 크기가 필요합니다 : 셀 크기가 테두리 크기를 포함하도록 셀의 테두리 상자가 필요합니다. 그렇지 않으면 경계 폭이 셀 너비에 추가되고 100 %를 초과하므로 셀이 서로 옆에 맞지 않게됩니다. 일반적인 콘텐츠 박스 레이아웃에서.

내 JSBin 데모 here을 볼 수 있으며 어느 div인지 명확하게 볼 수 있도록 테두리 색상을 그대로 두었습니다.

HTML :

<div class="table"> 
    <div class="row" style='height:70%;'> 
     <div class="cell" style="width:40%; border:1px solid red;"> 
      blah 
     </div><div class="cell" style="width:60%; border:1px solid blue;"> 
      kah 
     </div> 
    </div> 
    <div class="row" style='height:30%;'> 
     <div class="cell" style="width:100%; border:1px solid green;"> 
      hah 
     </div> 
    </div> 
</div>

CSS :

body, html {height:100%;} 

.table { width:100%; height: 100%; border: 1px solid pink; padding:0; margin:0;} 

.row { width:100%; padding:0; margin:0;} 

.cell { display: inline-block; height:100%; clear: none; padding:0; margin:0;box-sizing: border-box;}

출처

2014-02-25 07:48:09 guymid

너비 백분율 사용이 작동하지 않습니다.

답변

관련 문제