부모 안에 div 그리드를 포함하는 방법
쿠엔틴
포트폴리오에 대한 수평 그리드를 만들려고합니다.
그래서 그것은 위에서 아래로 요소를 쌓아 놓은 격자입니다. 그리고 그것이 3 개의 요소에 도달하면, 새로운 열을 시작하기 위해 위로 돌아갑니다.
컨테이너에 사각형을 추가하고 사각형이 넘칠 때 다시 쌓아 올리는 방법이 있습니까?
나는 여기에 갇혀> 테스트
Wowsk
컨테이너 요소를 속성을 가진 플렉스 박스로 만들 것 flex-flow:column wrap;입니다.
#container {
max-height: 700px;
display: flex;
flex-flow: column wrap;
}
.square {
text-align: center;
width: 200px;
height: 200px;
background-color: red;
border: solid 1px white;
}<div id="container" class="clearfix">
<div class="square">
<p>1</p>
</div>
<div class="square">
<p>2</p>
</div>
<div class="square">
<p>3</p>
</div>
<div class="square">
<p>4</p>
</div>
<div class="square">
<p>5</p>
</div>
<div class="square">
<p>6</p>
</div>
<div class="square">
<p>7</p>
</div>
<div class="square">
<p>8</p>
</div>
<div class="square">
<p>9</p>
</div>
<div class="square">
<p>10</p>
</div>
<div class="square">
<p>11</p>
</div>
<div class="square">
<p>12</p>
</div>
<div class="square">
<p>13</p>
</div>
<div class="square">
<p>14</p>
</div>
<div class="square">
<p>15</p>
</div>
<div class="square">
<p>16</p>
</div>
<div class="square">
<p>17</p>
</div>
<div class="square">
<p>18</p>
</div>
<div class="square">
<p>19</p>
</div>
<div class="square">
<p>20</p>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
DIV 내부에 수레를 포함하는 방법
- 2
부모 div 안에 2 개의 div를 수평으로 정렬하는 방법
- 3
자식 div를 부모 div에 자동으로 포함하는 방법은 무엇입니까?
- 4
div를 부모 div의 높이에 배치하는 방법
- 5
포함하는 부모를 채우기 위해 부모 Div 높이를 확장하는 방법
- 6
내부 div를 외부 div 안에 맞추는 방법
- 7
부동 상대 자식을 포함하는 부모 div를 수정하는 방법은 무엇입니까?
- 8
중앙 부모 div 안에 여백이 균등 한 반응 형 상자를 만드는 방법
- 9
Bootstrap에서 d-flex를 사용하는 동안 부모의 div 높이를 얻는 방법
- 10
스크롤바를 사용하여 부모 div 안에 목록을 맞추는 방법
- 11
부모 컴포넌트에서 함수를 호출하는 방법
- 12
type = radio를 포함하는 div 블록에서 모든 요소를 얻는 방법은 무엇입니까?
- 13
Django / Bootstrap 4 : 여러 부모 div 내부에 요소를 정렬하는 방법
- 14
드롭 정렬을 부모 div에 맞추는 방법
- 15
부모 클래스의 패딩 안에 자식 div를 맞추는 방법은 무엇입니까?
- 16
HttpContext를 사용하여 div 안에 텍스트를 포함하는 방법은 무엇입니까?
- 17
DOM 두 개의 div (내부 jQuery 포함)를 서로 옆에 추가하는 방법은 무엇입니까?
- 18
부모 자식 div가 서로 안에 있지 않은 경우 부모 자식 범주를 나열하는 방법은 무엇입니까?
- 19
div를 다른 div 안에 중첩되도록 설정하고 자동 조정 가능한 높이와 무게로 부모 div를 채우는 방법
- 20
부모 div의 아래쪽 테두리에 자식 div 스틱을 만드는 방법은 부모 내부에 50 %, 외부에 50 %가 있습니다.
- 21
그리드 div를 부트 스트랩에서 자식 수준으로 나누는 방법
- 22
자식 div를 부모 div의 크기로 만드는 방법
- 23
그리드에서 HyperLinked Field를 사용하여 div를 표시하는 방법
- 24
Ant에서 빌드하는 동안 외부 클래스 파일을 포함하는 방법
- 25
그리드 외부에서 그리는 동안 matplotlib 그리드를 제한하는 방법은 무엇입니까?
- 26
CSS에 그리드와 같은 특정 부분 만 포함되도록 부트 스트랩 버전 4를 빌드하는 방법은 무엇입니까?
- 27
Xamarin Forms 그리드 레이아웃에 이미지를 포함하는 방법
- 28
CSS 그리드에서 div를 중앙에 배치하는 방법
- 29
MongoDB 쿼리에서 문자열의 특정 부분을 포함하는 레코드를 제외하는 방법
몇 마디 만하겠습니다