CSS 플로트 및 여백 문제 사용

Question

이것은 항상 저를 곤란하게합니다. 그리고 나는 항상 더 나은 방법이 있어야한다고 생각했습니다.

나는 보통 스타일 = "margin-right 0px;를해야합니다." 마지막 div에서 3 가지를 모두 보여줍니다. 그러나 나는 그 필요성이 없으면 일어나는 것이 이상적입니다.

어떻게 처리하겠습니까? (IE7을 지원해야 함)

샘플 코드는 내가 얻으려고하는 것을 설명하기 위해 만든이 빠른 이미지를 따릅니다. 영상.

.container { 
    width: 400px; 
} 

.container div { 
    width: 100px; 
    float: left; 
    margin-right: 50px; 
} 

.container a { 
    display: block; 
} 

.clearfloats { 
    clear: both;  
} 

</style> 

<div class="container"> 

    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div style="margin-right: 0px;"><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <br class="clearfloats" /> 

    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <div style="margin-right: 0px;"><img src="someimage.jpg" /><a href="#">some link</a></div> 
    <br class="clearfloats" /> 

</div> 

Answer 1

까지 다시 IE7은 여전히뿐만 호환 이런 종류의 일을 할 수있는 가장 쉬운 방법 ... 테이블, 나는 생각한다. 마크 업과 관련하여 가장 좋은 것은 아니지만 올바르게 배치 될 것이라는 보장이 있습니다.

<table> 
    <tr> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    <td> 
     <img src="someimage.jpg" /><a href="#">some link</a> 
    </td> 
    </tr> 
</table> 

Answer 2

IE7은 다소 버그가 있지만 첫 번째 자식 의사 선택기를 지원합니다.

왼쪽으로 띄우고 왼쪽 여백을 지우면 작동합니다. : after 의사 선택기를 사용하여 행 구분 후 부동을 지울 수도 있습니다. 다음 CSS와

<div class="container"> 

    <div class="holder"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 

    <div class="holder"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 

</div> 

:

.container { 
    width: 400px; 

    background: #505050; 
} 

.holder:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.item { 
    float: left; 
    margin-left: 50px; 

    width: 100px; 
    height: 100px; 

    background: #202020; 
} 

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

http://jsfiddle.net/8h3zr/는 데모를 제공합니다.

Answer 3

나는 더 나은 방법은 .contanier 뒤에 그리고 div 앞에 새로운 레이블을 추가하는 것이라고 생각한다.

예를 들어

:

<style> 
.container { 
    width: 400px; 
    overflow:hidden; 
} 

.subContainer{ 
    width:460px; 
} 

.container div { 
    width: 100px; 
    float: left; 
    margin-right: 50px; 
} 

.container a { 
    display: block; 
} 

.clearfloats { 
    clear: both;  
} 

</style> 

<div class="container"> 
    <div class="subContainer"> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <br class="clearfloats" /> 

     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <div><img src="someimage.jpg" /><a href="#">some link</a></div> 
     <br class="clearfloats" /> 
    </div> 
</div>