div의 너비가 각각 사이에 패딩되어 20%가 되도록 만듭니다. 단, 첫 번째 왼쪽이나 마지막 오른쪽은 그렇지 않습니다.
-
02-01-2020 - |
문제
다음과 같은 레이아웃을 구축했다고 가정해 보겠습니다.
텍스트와 그리드가 동일한 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%;
}