CSS 위치 지정에 대한 도움이 필요합니다.

Question

CSS 디자인에 익숙하며 다음과 비슷한 페이지를 디자인하고 싶습니다.

스팬 속성으로 이미지를 분리 할 수 ​​있지만 텍스트와 버튼을 단일 행으로 배치 할 수 없습니다.

http://4.bp.blogspot.com/_cPEUCNW5H44/S4ZCS-H07sI/AAAAAAAAPPk/dNsF1CMIm4s/s1600-h/UI.PNG

이것은 내가 지금까지

<div align="center"> 
    <span style="border:1px solid #ECECEC;margin: 10px"> 
    <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </span> 
    <span style="border:1px solid #ECECEC;margin: 10px"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </span> 
    <span style="border:1px solid #ECECEC;margin: 10px"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </span> 
    <span style="border:1px solid #ECECEC;margin: 10px"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </span> 
    <span style="border:1px solid #ECECEC;margin: 10px"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </span> 
    <span style="border:1px solid #ECECEC;margin: 10px"> 
<div>some text here 
</div> 
<button>XYZ</button> 
    </span> 
    </div> 

했을하지만 내 마지막 사업부는 "여기에 일부 텍스트를"가진 버튼이 하단에 표시지고 것입니다. 나는 이것을 테이블을 사용하여 디자인 할 수 있다는 것을 알고있다. 하지만 나는 span 태그 안에 div 태그를 사용하지 않아야한다고 생각합니다.

모든 팁/제안을 환영합니다.

Answer 1

Div는 블록 요소이며 항상 새 행에 표시됩니다. 다음을 사용하여 시도 할 수 있습니다 "플로트 : 왼쪽"이 동작을 오버라이드 (override) :

<div align="center"> 

    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left"> 
    <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </div> 
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </div> 
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </div> 
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </div> 
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left"> 
    <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/> 
    </div> 
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left"> 
     some text here<br /><br /> 
     <button>XYZ</button> 
    </div> 

</div> 

그냥 기억

Answer 2

만족스러운 결과를 얻을 때까지 float:left 또는 비슷한 것을 사용하십시오.

Answer 3

내가 가장 필요에 맞게 것이다 사업부에 display:inline 생각하는 div의 폭과 높이를 부가 요소 필요.

Answer 4

이러한 모든 종류의 문제에 대해 항상 float : left를 사용하십시오. 이렇게하면 div 태그가 줄 바꿈을하지 않게됩니다. 이것으로 강력한 것을 얻을 수 있습니다.

Answer 5

본능이 맞다고 생각합니다. W3C의 지침은 인라인 요소 (span) 안의 블록 요소 (div)를 사용하지 말라는 것을 기억하는 것입니다. 그것은 의미 론적 관점에서 구피 (goofy)이다. 내가 문장 안에 단락이 있다고 말하는 것 같습니다.

div로 변경하면 원하는 것을 얻을 수 있다고 생각합니다. 가능하면 < 레이블 >은 마지막 텍스트의 요점에 따라 의미 상으로 더 정확할 수 있습니다.

<span>some text here</span>