Нужна помощь с позиционированием 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, имеющий "некоторый текст здесь" и кнопки, отображается внизу. Я знаю, что могу разработать это, используя таблицы. Но я чувствую, что не должен использовать тег div внутри тега span.

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

Answer 1

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

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>

Просто помните, что этим элементам нужно атрибуты ширины и высоты

Answer 3

Я думаю, display:inline на div подойдет вам лучше всего.

Answer 4

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

Answer 5

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

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

<span>some text here</span>