Лучший способ восстановить эту цифру с помощью HTML / CSS

Question

Лучший способ восстановить эту цифру с помощью HTML / CSS

0

У меня есть этот (простой) вопрос. Я хочу перестроить следующий рисунок с помощью html/css

http://s1.directupload.net/file/d/3429/iunjflkr_png.htm

Мое предложение 1 (просто псевдокод без форматирования CSS):
таблица в div

<div>
  <table>
    <tr>
     <td>blue</td>
     <td>headline</td>
     <td>
       <input type="radio" ..><input type="radio" ..>
     </td>
    </tr>
   </table>
</div>

Мое предложение 2 (просто псевдокод без форматирования CSS):
divs в div

<div>
  <div>blue</div>
  <div>headline</div>
  <div>
    <input type="radio" ..><input type="radio" ..>
  </div>
</div>

Является ли одно из моих предложений пригодным для использования или есть другое (лучшее) подходящее решение?

user2948467 02 нояб. 2013, в 20:49

Источник

Теги:

html

css

table

2 ответа

1

Вы должны использовать <table> только для табличных данных. Если нет, это семантически некорректно.

Ваше дело не представляется мне табличными данными, поэтому я предлагаю вам использовать div или span s.

Или, если вы считаете это списком, вы также можете использовать

<li>
    Wird das Merkmal zweiseitig toleriert?
    <ul>
        <li>ja</li>
        <li>nein</li>
    </ul>
</li>

Oriol 02 нояб. 2013, в 18:23

0

Спасибо за Ваш ответ! Может быть, я мог бы использовать список в div, например: <div><ul><li>...</li><li>...</li><li>...</li></ul></div> li-элементы должны располагаться по горизонтали, что вы имеете в виду?
user2948467 02 нояб. 2013, в 19:50
0

@ user2948467 Да, это другая возможность, но я не уверен, можно ли считать один вопрос списком (список только с одним элементом немного странный)
Oriol 02 нояб. 2013, в 20:02
0

Окончательный результат должен выглядеть примерно так: `<ul> <li> Рисунок 1, как показано выше </ li> <li> Рисунок 2, как показано выше </ li> <li> Рисунок n, как показано выше </ li> </ ul> «Мой вопрос касается правильного построения одной фигуры. Поэтому идея использования списка в списке содержит как минимум 3 элемента. Первый => синий квадрат со стрелкой внутри; Второй => заголовок; Третье => Группа радио кнопок. Я надеюсь, что это стало более понятным.
user2948467 02 нояб. 2013, в 20:10

Показать ещё 1 комментарий

Ещё вопросы

Спасибо за Ваш ответ! Может быть, я мог бы использовать список в div, например: <div><ul><li>...</li><li>...</li><li>...</li></ul></div> li-элементы должны располагаться по горизонтали, что вы имеете в виду?
@ user2948467 Да, это другая возможность, но я не уверен, можно ли считать один вопрос списком (список только с одним элементом немного странный)
Окончательный результат должен выглядеть примерно так: `<ul> <li> Рисунок 1, как показано выше </ li> <li> Рисунок 2, как показано выше </ li> <li> Рисунок n, как показано выше </ li> </ ul> «Мой вопрос касается правильного построения одной фигуры. Поэтому идея использования списка в списке содержит как минимум 3 элемента. Первый => синий квадрат со стрелкой внутри; Второй => заголовок; Третье => Группа радио кнопок. Я надеюсь, что это стало более понятным.

Nabil · Accepted Answer · 2013-11-02T17-16-00.000Z

Вы можете сделать это, используя только div и некоторые css. Не используйте таблицу здесь, как сказал Ориол. Вот пример кода:

Код HTML:

<div>
  <div class='MainBar'>
   <div class='arrow'></div>
   <div class='text'>
     <p>text goes here</p>
   </div>
   <div class='ja'>
     <p>Ja</p>
   </div>
   <div class='nein'>
     <p>Nein</p>
   </div>
  </div>
</div>

И код CSS:

.MainBar{
width: 990px;
max-width: 990px;
height: 80px;
border: 1px solid GREY;
}

.arrow{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}

.text{
width: 660px;
height: 80px;
float: left;
}

.ja{
width: 110px;
height: 80px;
background-color: #5B9BD5;
float: left;
}

.nein{
width: 110px;
height: 80px;
background-color: #D8D8D8;
float: left;
}

Спасибо! Я не был уверен, является ли использование такого количества элементов div хорошим стилем кодирования или нет. Если нет другого решения, я пробую это с решением divs.