div가 두 줄로 분리되는 것을 방지하려면 어떻게해야합니까?

Question

divs를 사용하여 테이블을 작업하는 중입니다. 그리고 여기 테이블의 머리가 있습니다 :

<div id="table-header"> 
       <div id="header-row"> 
        <div class="rate-rule-column s-boarder"> 
         <div class="header-text ">Rate Rule</div> 
        </div> 
        <div class="rate-column s-boarder"> 
         <div class="header-text">Rate</div> 
        </div> 
        <div class="qty-column s-boarder"> 
         <div class="header-text">Qty</div> 
        </div> 
        <div class="copies-column s-boarder"> 
         <div class="header-text">Copies</div> 
        </div> 
        <div class="amount-column s-boarder"> 
         <div class="header-text">Amount</div> 
        </div> 
       </div> 
      </div> 

현재 코드는 이러한 요소의 위치를 ​​지정하기 위해 float : left를 사용하고 있습니다. 이 문제는 다음과 같습니다. 줌이 100 % 일 때 제대로 작동하지만 확대/축소 할 때 테이블 선이 두 줄로 나뉩니다.

하나의 단일 셀 내에서 두 줄로 나눠지지 않습니다. 이렇게 공백 : nowrap는이 경우에는 돕지 않는다. divs 사이에 줄 바꿈을 방지하는 방법이 있습니까?

편집 :

추가 CSS 코드의 요청에 따라. 그러나 나에게 유일하게 흥미로운 부분은 왼쪽이다.

.amount-column{ 
    width: 130px; 
    height: 30px; 
    float: right; 
} 

.copies-column{ 
    width: 69px; 
    height: 30px; 
    float: left; 
} 

.qty-column{ 
    width: 150px; 
    height: 30px; 
    float: left; 
} 

.rate-column{ 
    width: 150px; 
    height: 30px; 
    float: left; 
} 

.rate-rule-column{ 
    width: 300px; 
    height: 30px; 
    float: left; 
} 

Answer 1

귀하의 div의 두 라인에 침입 이유는 컨테이너 사업부 "헤더 행은"고정 폭을하지 않는다는 것입니다. 뷰포트의 전체 너비가 필요하며 내부의 요소가 뷰 포트보다 큰 너비를 갖는 경우 div는 자동으로 새 줄로 바뀝니다. 이 문제를 해결하려면 모든 부동 div의 너비를 합한 다음 컨테이너 행 div의 너비로 설정해야합니다.

#header-row{width: 800px; overflow: hidden;} 

이렇게하면 div가 컨테이너 div와 같은 줄에 있어야합니다. (당신은 내가 있으리라 믿고있어 열 고정 폭을 사용하고 있기 때문에 당신이 그 (것)들을 반응 할 필요가 없습니다)

데모 : 도움이 http://jsfiddle.net/1z3secLz/

희망.

Answer 2

고정 너비를 사용하므로 화면 크기가 변경되면 그에 따라 요소가 변경되지 않습니다. % widths를 대신 사용해보십시오 :

Ex:.copies-column{ 
    width: 23%; //Just an example but you need to adjust the width of all elements in % according to your desired output 
    height: 30px; 
    float: left; 
} 

Answer 3

퍼센트를 기반으로하는 너비를 사용하면 응답 성이 가능하므로 아래 그림과 같이 문자를 정렬합니다. 또한 여백 추가 : 0 자동; 컨테이너 부모에게 당신이 원한다면 당신은 약간의 시궁창을 줄 수 있습니다. 또한이 경우 div를 포함하는 div를 "clearfix"해야합니다. http://jsfiddle.net/6ws00cey/

.amount-column, .copies-column, .qty-column, .rate-column, .rate-rule-column{ 
    width: 20%; 
    height: 30px; 
    float: left; 
    text-align: center; 
} 

.header-row{ 
    clear: both; 
}