HTML 갤러리 목록의 임의의 공간, 제거/수정 방법?

사이트 : https://s123c.github.io/design.html HTML 갤러리 목록의 임의의 공간, 제거/수정 방법?

3 x 4 포트폴리오 갤러리에서 요소 목록을 작성하려고합니다. 그러나 첫 번째 이미지와 행의 시작 부분 사이에 공백 (너비 3 개 항목)이 있습니다. 비슷한 주제를 찾으려고 노력했지만 해결책이 일치하지 않아서 내 문제와 비슷한 것을 찾을 수 없습니다.

출처

2017-02-13 s123c

StackOverflow에 오신 것을 환영합니다! 저희가 귀하를보다 잘 돕기 위해 귀하의 질문을 업데이트하여 관련 코드를 [최소, 완전하고 검증 가능한 예] (http://stackoverflow.com/help/mcve)에 표시하십시오. 또한 문제를 해결하기 위해 지금까지 시도한 것을 알려주십시오. 자세한 내용은 좋은 질문을하는 방법에 관한 [도움말] (http://stackoverflow.com/help/how-to-ask)를 참조하십시오. –

Flaxbox는 요소 레이아웃을위한 놀라운 속성입니다. 나는 웹 사이트를 잠깐 살펴 봤는데 .css 파일 끝에 ul {display : flex}를 추가하면 더 이상 문제를 볼 수 없다.

#gallery의 현재 레이아웃 코드를 제거하고 다음을 추가하십시오.

.container-a4 { 
    display: table; 
} 
.caption-style-4 { 
    display: table-row; 
} 

.caption-style-4 li { 
    display: table-cell; 
}

출처

2017-02-13 01:59:08 Mers

좋은 해결책 중 하나는 Foundation과 같은 프레임 워크를 사용하는 것이므로 가로 스크롤과 같은 일은 발생하지 않으며 웹 사이트의 모바일 버전을 만드는 데 도움이됩니다. 프레임 워크가이 문제를 해결하는 데 도움이 될 것입니다.

물론 이것은 기초를 올바르게 사용하면 쉽게 발생합니다. 사용하기 쉽습니다.

출처

2017-02-13 01:14:03

아무 것도 사용할 필요가 없습니다. 스타일 코드에이 줄을 삽입하기 만하면됩니다. 표시 테이블, 테이블 행 및 표 셀은 때때로 문제를 일으키므로 부동 요소가있는 목록을 사용하는 것이 가장 좋습니다.

.row { 
    overflow: auto; 
}

UL 태그는 조금 오싹, 그래서 블록 요소로 UL 목록 행위를 만들기 위해 오버 플로우 속성을 사용하는 것이 가장 좋습니다.

왼쪽으로 요소를 나열하기 때문에 ul 요소의 높이가 높아지지 않으므로 오버플로 특성을 사용해야합니다.

출처

2017-02-13 06:23:38

HTML 갤러리 목록의 임의의 공간, 제거/수정 방법?

답변

관련 문제