안녕하세요. 반응 형 썸네일 갤러리를 만들기 위해 버번 깔끔한 프레임 워크를 사용하고 있습니다. 이제 그것은 CSS를 생성했으며 어떻게 든 엄지 손가락의 크기를 조정할 때 위치에서 벗어난 것처럼 보입니다. 여기 내가 사용한 코드
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-color: #f4f4f4; }
.galleryContainer {
*zoom: 1;
max-width: 77.0625em;
margin-left: auto;
margin-right: auto;
max-width: 1200px !important; }
.galleryContainer:before, .galleryContainer:after {
content: " ";
display: table; }
.galleryContainer:after {
clear: both; }
.galleryContainer .galleryList {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
border: 2px solid red; }
.galleryContainer .galleryList:last-child {
margin-right: 0; }
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0; }
.galleryContainer .galleryList li {
float: left;
padding: 0;
margin: 0;
width: 20%;
padding: 0px; }
@media screen and (min-width: 1338px) {
.galleryContainer .galleryList li {
width: 10%; } }
.galleryContainer .galleryList img {
width: 100%;
height: 100%; }
당신은 여기 내 데모 페이지에 여기에서 문제를 확인하실 수 있습니다 DEMO
내가 어디에서 잘못하고 있는지 알려주십시오. 감사.
float: left크기를 조정할 때 설정 한이 문제를 일으키는 것으로 보입니다 . li이 경우 요소를 사용 하여 display-inline블록 접근 방식을 채택합니다 . inline-block요소 와 관련된 여백을 제거하려면 부모에 세 개의 선언을 추가해야합니다 .
당신은 CSS
.galleryContainer .galleryList li {
float: left; <-- remove this
display: inline-block;
padding: 0;
margin: 0;
width: 20%;
padding: 0px;
font-size: 0px;
}
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0px; <-- add this
letter-spacing: 0px; <-- add this
word-spacing: 0px; <-- add this
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다