세 번째 행 이후에 float 속성이 올바르게 작동하지 않는 이유는 무엇입니까?
Topollillo
일부 행 후에 css float 속성이 그 이유를 알 수없는 이상한 동작을합니다.
html이 동적으로 생성되기 때문에 행 사이에 "clear"속성이있는 div를 추가 할 수 없다는 점을 고려하십시오 (php 루프).
나는 그것을하기 위해 때로는 2 개의 이미지가 있고 다른 시간에 3이 있기 때문에 행 사이에 명확한 div를 삽입 할시기를 결정하는 PHP에서 함수를 만들어야한다고 생각합니다.
하지만 저는 CSS 솔루션을 선호합니다.
다음은 전체 코드입니다.
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes{
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}<html>
<body>
<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>
</body>
</html> j08691
귀하의 예에는 이전 이미지보다 약간 짧은 이미지가 있습니다. 그것은 clear일반적으로 수정 되는 다음 행의 간격을 유발합니다 . 행당 동일한 수의 요소 nth-child가 있으면 clear와 같은 것을 사용할 수 있지만 한 줄당 요소 수가 변경 될 수 있다고 말 했으므로 작동하지 않습니다. 쉬운 수정은 .box-inner수업 에 최소 높이를 설정하는 것 입니다.
.row {
width: 600px;
text-align: center;
margin: 0 auto;
}
.boxes {
box-sizing: border-box;
position: relative;
min-height: 1px;
height: auto;
float: left;
padding-left: 10px;
padding-bottom: 10px;
}
.box1 {
width: 33.33333333333333%;
}
.box2 {
width: 66.66666666666666%;
}
.box-inner {
background-color: grey;
width: 100%;
height: 100%;
min-height: 122px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}<div class="row">
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box2 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
<div class="box1 boxes">
<div class="box-inner">
<img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
내 루프가 첫 번째 반복에서만 올바르게 작동하는 이유는 무엇입니까?
- 2
배열의 객체 속성이 값에 올바르게 액세스하는 이유는 무엇입니까?
- 3
IF / THEN이 올바르게 작동하지 않는 이유는 무엇입니까?
- 4
threadpooltest가 올바르게 실행되지 않는 이유는 무엇입니까?
- 5
PEGjs가 / 올바르게 작동하지 않는 이유는 무엇입니까?
- 6
count (*)가 올바르게 작동하지 않는 이유는 무엇입니까?
- 7
비동기 작업이 올바르게 실행되지 않는 이유는 무엇입니까?
- 8
세 번째 조건이 검색에서 작동하지 않는 이유는 무엇입니까?
- 9
첫 번째 onchange 확인란 실행이 올바르게 작동하지 않습니다. React Native Help pls
- 10
Windows의 sh에서 Python의 하위 프로세스 호출이 올바르게 작동하지 않는 이유는 무엇입니까?
- 11
web3 utils BN이 수학에서 올바르게 작동하지 않는 이유는 무엇입니까?
- 12
내 코드가 동기화에서 올바르게 작동하지 않는 이유는 무엇입니까?
- 13
행렬이 올바르게 초기화 / 인쇄되지 않는 이유는 무엇입니까?
- 14
이 Bootstrap 3 열이 올바르게 작동하지 않는 이유는 무엇입니까?
- 15
첫 번째 snippit은 작동하지만 두 번째는 작동하지 않는 이유는 무엇입니까?
- 16
Sidekiq 4가 메일러에서 올바르게 작동하지 않는 이유는 무엇입니까?
- 17
greater_equal에서 is_sorted가 올바르게 작동하지 않는 이유는 무엇입니까?
- 18
AsyncTask가 2 번만 올바르게 작동하는 이유는 무엇입니까?
- 19
두 번째 진술이 작동하지 않는 이유는 무엇입니까?
- 20
다음 변수 할당이 올바르게 작동하지 않는 이유는 무엇입니까?
- 21
boost :: geometry :: intersection이 올바르게 작동하지 않는 이유는 무엇입니까?
- 22
Files.isHidden ()이 올바르게 작동하지 않는 이유는 무엇입니까?
- 23
구문 분석 된 Double이 올바르게 작동하지 않는 이유는 무엇입니까?
- 24
내 함수가 개체 속성을 올바르게 정렬하지 않는 이유는 무엇입니까?
- 25
AngularJS $ scope가 올바르게 작동하지 않는 이유는 무엇입니까?
- 26
Ajax가 첫 번째 요청에서 올바르게 작동하지만 두 번째 요청에서 새 페이지에 부분보기를 반환하는 이유는 무엇입니까?
- 27
첫 번째 \ t가 작동하지 않는 이유는 무엇입니까?
- 28
확인 된 무선 입력의 값이 올바르게 액세스되지만 "for"루프 내에서 액세스 될 때 그룹의 첫 번째 값이 기본값 인 이유는 무엇입니까?
- 29
두 번째 for 루프가 실행되지 않는 이유는 무엇입니까?
몇 마디 만하겠습니다