css 속성 float와 inline-block 문제입니다.

Question

안녕하세요, 개인 홈페이지를 만들고 있던 도중 css 설정을 어떻게 해야하는지 모르겠어서 질문드립니다. db에서 받아 온 게시글을 appendChild로 가져와 article에 추가하는 방식인데각 articled을 inline-block으로 가져올 시 크롬 디버거로 과정을 보면 이렇게 두번째 열 부터 아래 기준으로 정렬되어 버립니다. 위로 다 붙으면 좋겠는데... float : left 를 사용할 경우에는 위로 다 붙기는 하지만 이렇게 창을 줄였을 시 줄바꿈이 되어버립니다. 상위 요소에 overflow:scroll를 해도 이렇네요

section .wrap{ white-space: nowrap; overflow-x: scroll; } section .wrap article{ display: inline-block; min-width: 200px; width:20%; height:100%; } if((whatmenu !== "board_video") && (whatmenu !== "board_interactive")&& (whatmenu !== "board_project")){ if(arrayNum%5 == 0){ var area = document.getElementById("first"); area.appendChild(cardgroup[groupNum]); console.log("_1",idx); }else if(arrayNum%5 == 1){ var area = document.getElementById("second"); area.appendChild(cardgroup[groupNum]); console.log("_2",idx); }else if(arrayNum%5 == 2){ var area = document.getElementById("third"); area.appendChild(cardgroup[groupNum]); console.log("_3",idx); }else if(arrayNum%5 == 3){ var area = document.getElementById("fourth"); area.appendChild(cardgroup[groupNum]); console.log("_4",idx); }else if(arrayNum%5 == 4){ var area = document.getElementById("fifth"); area.appendChild(cardgroup[groupNum]); console.log("_5",idx); } arrayNum += 1; }

daegikim · Answer

IE 구 버전 지원해야하는 프로젝트 아니라면CSS grid 레이아웃 한 번 사용해 보시는 걸 추천드려요.원하시는 디자인 쉽게 만들 수 있을거예요.https://www.w3schools.com/css/css_grid.asp

css 속성 float와 inline-block 문제입니다.

1개의 답변

#float 목록