div 클래스 마지막 div 아래로 html CSS

Question

마지막 div (클래스)가 아래로 이동하는 것을 방지하려면 어떻게해야합니까? .artist_wrap에 margin-right을 넣었습니다. 나는 overflow: hidden을 넣으면 #music_videos_wrap 안에 머무를 것이라고 생각했지만 사라졌습니다. 나를 도와 줄 사람 덕분에.

HTML :

<div id="music_videos_wrap"> 
    <div class="artist_wrap"></div> 
    <div class="artist_wrap"></div> 
    <div class="artist_wrap"></div> 
    <div class="artist_wrap"></div> 
</div> 

CSS :

#music_videos_wrap{ 
    float:left; 
    margin:0 0 0 23px; 
    width:944px; 
    height: 257px; 
    background-color: red; 
    /*overflow:hidden;*/ 
} 
.artist_wrap{ 
    float:left; 
    width:190px; 
    height:257px; 
    background-color: green; 
    margin:0 62px 0 0; 
} 

Answer 1

우선, 측정 값이 다소 틀리면 원하는 요소에 맞게 너비가 946px가되어야합니다. 또는 .artist_wrap의 너비를 변경하십시오. 이를 수정 한 다음 오른쪽 여백 대신 여백 - 왼쪽 : 62px를 .artist-wrapp로 설정할 수 있습니다.

.artist_wrap:first-child { margin-left:0; } 

가 jsfiddle 참조 : http://jsfiddle.net/Rkp3Z/

Answer 2

당신의 .artist_wrap 폭이

이

당신이 불을 지르고를 사용하고 최대 값이 무엇인지 볼 수 조정해야합니다 너무 큰 부모의 너비에 맞을 수 있습니다.

각 당신이 그것을 맞게 만들기 위해 폭에서이 마진을 뺄 필요가 .artist_wrap에 당신이 오른쪽 여백을 넣어 경우

here you go with 150px as width

또는 부모를 계산 여백, 테두리와 패딩

944px parents width/4 divs = 236 width per artist child 

을 뺀 선폭 부모 944 픽셀 폭 수단

236-62 = 174px artist_wrap 대한 폭

you can also apply margin:0 31px for artist_wrap to have a symmetric layout