需要CSS定位幫助

我對CSS設計很新鮮，我想設計一個類似於下面的頁面。需要CSS定位幫助

我能夠用span屬性分隔圖像，但我無法將文本和按鈕作爲單行放置。

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>

但有「這裏一些文字」我的最後一個div和按鈕越來越顯示在底部。我知道我可以使用表格來設計它。但我覺得我不應該在span標籤內使用div標籤。

歡迎任何提示/建議。

來源

2010-02-25 bragboy

Div是一個塊元素，並且總是顯示在新行。您可以嘗試使用「浮動：左」重寫此行爲：

<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>

只記得，那些需要的div寬度和高度atributes

來源

2010-02-25 09:42:09

非常感謝！ – bragboy 2010-02-25 09:54:30