너비를 백분율로 계산하여 LESS CSS에서 여백을 뺀 값

Question

CMS 앱에서 Twitter Bootstrap 그리드 시스템을 사용합니다.

사용자가 페이지를 만들면 행에 원하는 수의 열을 추가 할 수 있습니다. 이 행을 고려

<div class="span9 row"> 
    <div class="span5">span5</div> 
    <div class="span4">span4</div> 
</div> 

는 내가하고 싶은 사용자가 동등하게 내 열 사이의 폭을 배포하는 행을 설정할 수있는 기능을 추가합니다.

따라서 span5 및 span4 클래스는 재정의됩니다. 이것은 본질적으로 테이블 행처럼 행동 할 것이지만 행을 display: table-row으로 만드는 것은 해킹이라고 생각하며 TwBootstrap 그리드의 반응 형 기능을 망칠 것입니다. 나는

.row.span9.shared.child-count-2 > div { 
    width: 340px; 
} 

이미 CSS 덜 사용하고 있기 때문에 :

<div class="span9 row shared child-count-2"> 
    <div class="span5">span5</div> 
    <div class="span4">span4</div> 
</div> 

그리고 CSS에서을 : 내가 피할 싶은 것이

는

, 같은 폭의 각 조합을 정의하는 것입니다 이 작업을 할 수있는 편리한 계산이있을 것이라고 생각했습니다.

문제는 50 % 너비를 지정하면 20px이 margin-left입니다. 그래서 각 열에 대해 행의 너비를 20px 빼야합니다. 나머지 너비를 열의 수로 나눕니다.

또한 JavaScript를 사용하지 않는 것이 좋습니다. 나는보기의 99 %를 렌더링하는 것을 좋아하지 않으며 스크립트에서 조정을합니다. 스크립트 실행이 약간 지연되면 사용자가 레이아웃이 깜박 거리는 것을 볼 수 있습니다. 안좋다.

그렇다면 LESS/CSS에서이를 수행 할 수있는 방법이 있습니까?

Answer 1

당신은 덜 사용하여 그것을 얻을 수 있습니다. ".. 여기 lesscss.org을 확인하고 이동 그래서 당신은 등 요소의 폭을 얻을 수 document.getElementById('myId').width 또한 같은 것들을 사용할 수 있습니다

@var: `"hello".toUpperCase() + '!'`; 

: LESS하면 백 진드기로 포장 자바 스크립트 식의 평가를 사용할 수 있습니다 JavaScript 평가 "섹션을 참조하십시오.

도움이 더 필요하면 문의하십시오. :)