Нужна помощь с позиционированием 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.

Любые советы/предложения приветствуются.

Answer 1

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> 

Просто помните, что эти дивы нужно ширину и высоту atributes

Answer 2

Попробуйте использовать float:left или что-то подобное, пока не получите удовлетворительный результат.

Answer 3

Я думаю display:inline на DIV устраивающих ваши потребности лучше.

Answer 4

Всегда используйте поплавок: оставленные для всех этих проблем. Это позволит убедиться, что тег div не помещает новую строку. Вы можете добиться этого.

Answer 5

Я думаю, что ваш инстинкт верен. Задняя часть мозга помнит, что где-то видит, что руководство W3C не должно использовать элементы блока (div) внутри встроенных элементов (span). Это глупо с точки зрения семантики. Это немного похоже на то, что у меня есть параграф внутри предложения.

Я думаю, вы получите то, что хотите, если измените этот div на диапазон. Возможно, < метка > более корректно семантически в зависимости от того, что точка этого последнего текста.

<span>some text here</span>