HTML-таблица, встроенный дисплей CSS или другой?

Question

Построение нового, веб-сайта, я сейчас в процессе интеграции дизайна.

На странице сервиса, мы должны описать каждую услугу с:

• икону
• Заголовок
• Короткий текст

Вот как это выглядит на PSD:

Мой вопрос: какой оптимальный способ реализовать это?

Должен ли я пойти с:

• HTML-таблица
• ul/li HTML структуры с display:inline CSS разметки
• display:inline-block CSS разметки
• или другое решение?

Спасибо.

Answer 1

Я сделал это быстро макете

LIVE DEMO

с помощью:

#wrapper{ 
    height:20%; 
    width:40%; 
    position:fixed; 
    background-color:lightblue; 
} 

#iconImage{ 
    height:40%; 
    width:20%; 
    background-color:black; 
    margin-left:5%; 
    margin-top:5%; 
} 

#title{ 
    height:90%; 
    width:70%; 
margin-top:5%; 
    float:right; 
overflow:auto; 
} 

EDIT

Это должно теперь быть немного Чем лучше в том смысле, динамически (поскольку у меня нет жестко закодированных размеров).

Answer 2

Я бы воспользовался системой сетки Bootstrap, она хорошо реагирует на реакцию, а также хорошо встраивает вложенность. http://getbootstrap.com/css/#grid.

Heres быстро скрипку за то, что вы ищете: http://jsfiddle.net/7zmo5L4u/10/

<div class="col-xs-6"> 
    <div class="border"> 
     <div class="row"> 
      <div class="col-xs-2"> 
       <i class="glyphicon glyphicon-home"></i> 
      </div> 
      <div class="col-xs-10"> 
       <strong>INITIAL HOME CONSULTATION</strong> 
       <br/><br/> 
       We first visit your home, offer suggestions on how to best prepare it for guests and reiew the terms of our collaboration. 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

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

Я бы посоветовал вам не использовать таблицы.

Его довольно просто реализовать что-то подобное. С поплавками, то есть у вас есть контейнер div (clearfix) и два внутренних div (слева и справа).

Я думаю, что что-то, как это должно работать:

<div class="clearfix"> // get the clearfix css 
    <div style="float:left; width:50px;">Icon here</div> 
    <div style="float:right;">Text</div> 
</div> 

Answer 4

Есть много способов, чтобы идти об этом, например: Создание контейнера DIV

расположение

<div id="container"> 
<div class="image"><img src="images/myimage.png"></div> 
<div class="title"><h1>Your title</h1></div> 
<div class="container-text"><p>Your text</p></div> 
</div> 

Пользовательский интерфейс должен быть созданный с использованием CSS

<style> 
    #container { 
     display: block; 
     width="300px"; 
     background: #f1f1f1; 
    } 
    .image { 
     display: block; 
     float: left; 
     margin: 5px; 
    } 
    .title h1{ 
     font-family: Arial; 
     font-size: 18px; 
     padding: 5px; 
     color: #333 
    } 
    .container-text p{ 
     font-family: Arial; 
     font-size: 14px; 
     color: #999; 
    } 
</style> 

Надеюсь, это поможет.

Answer 5

Dont использовать таблицы, попробуйте этот код

<div style="width: 500px"> 
    <div style="width: 150px;float: left;"> 
     <img src="#" alt="the image"> 
    </div> 
    <div style="width: 350px;float: right;"> 
     <h3>INITIAL HOME CONSTUCTION</h3> 
     <p>We first visit your house,offer suggestions on how ...</p> 
    </div> 
    <div style="clear: both"></div> 
</div> 

ПРИМЕЧАНИЕ: Заменить ширину с тем, что когда-либо размера вы хотите, в то время как ширина детей дивы добавляет к ширине родительского сНу