div의 너비가 각각 사이에 패딩되어 20%가 되도록 만듭니다. 단, 첫 번째 왼쪽이나 마지막 오른쪽은 그렇지 않습니다.

StackOverflow https://stackoverflow.com//questions/25088133

문제

다음과 같은 레이아웃을 구축했다고 가정해 보겠습니다.

텍스트와 그리드가 동일한 div 내에 있고 약 990px의 너비를 공유한다고 가정하면 고정 너비 없이 이 그리드가 동일한 너비의 열을 갖도록 동적으로 만들 수 있습니까?

각각 설정할 수 있어요 div 에게 width:20%, 하지만 간격을 두지 않고 바로 옆에 줄을 서게 됩니다. http://jsfiddle.net/97H3P/

각각 설정할 수 있어요 div 에게 width: 20%, box-sizing: border-box, 그리고 padding: 0 20px, 그러나 선 가장자리와 첫 번째 및 마지막 가장자리 사이에 20px 간격이 있게 됩니다. div. http://jsfiddle.net/97H3P/1/

각각 설정할 수 있었는데 div 에게 box-sizing: border-box;, width: 20% 그리고 padding-right: 20px, 그리고 다섯 번째 div에서 다음을 설정합니다. padding-right: 0;, 그러나 다섯 번째 div는 나머지 div보다 넓습니다. http://jsfiddle.net/97H3P/2/

처음 4개를 설정할 수 있어요 div각 행의 s box-sizing: border-box;, width:20.8%, 다섯 번째는 width: 16.8%, 그런 다음 padding-right: 20px 그러나 그 수학은 990px ​​너비에서만 작동합니다. http://jsfiddle.net/97H3P/3/

이를 수행하는 더 좋은 방법이 있습니까?우아한 해결책을 찾을 수 없습니다.

감사해요.

업데이트:몇 분 동안 나는 CSS3에 관심이 있었습니다. column-count 하지만 왼쪽에서 오른쪽이 아닌 위에서 아래로만 작동한다는 것을 깨달았습니다. 이것이 바로 이 순서가 필요한 방식입니다.

도움이 되었습니까?

해결책

여기 부스트랩이 아닌 예를 빠르게 스케치했습니다.

Bootstrap 클래스를 사용하더라도.

트릭은 다음을 사용하여 달성됩니다. position: relative 그리고 box-sizing: border-box

반응도 좀 그렇네요.

다른 팁

flexbox를 살펴봐야 합니다. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

추가 div를 스페이서로 사용하는 것은 어떻습니까? 깡깡이

HTML

<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>

CSS

div {
    background: #000;
    height: 200px;
    float: left;
    opacity: 0.2;
    width: 18%;
}

div.spacer{
    opacity: 1;
    width: 2.5%;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top