需要CSS定位方面的幫助

Question

我對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標簽。

歡迎任何提示/建議。

Answer 1

嘗試使用float:left或類似的東西，直到獲得令人滿意的結果。

Answer 2

Div是一個塊元素，總是會在新行顯示。 您可以嘗試使用“float：left”來覆蓋此行為：

<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需要寬度和高度屬性

Answer 3

我認為display:inline div上的display:inline最符合您的需求。

Answer 4

總是使用float：left來解決所有這些問題。 這將確保div標簽不會添加新行。 你可以用這個來實現強大的功能。

Answer 5

我認為你的直覺是正確的。 大腦后面記得在某個地方看到W3C的指導是不使用內聯元素（span）內的塊元素（div）。 從語義學的角度來看，這是愚蠢的。 這有點像說我在一個句子里面有一個段落。

如果你將div改為span，我想你會得到你想要的東西。 根據最后一個文本的要點，<label>在語義上可能更正確。

<span>some text here</span>