2010-11-16 2 views
1
<table> 
<tr> 
<td></td> 
<td></td> 
</tr> 
</table> 

Как я повторить этот вид структуры с использованием <div> или <span> «изд CSSКак реализовать структуру таблицы с помощью CSS

+3

Зачем вам это нужно? Если вы показываете табличные данные, используйте таблицу. – Kyle

+0

Я считаю, что вы не можете. Единственное, что вы можете сделать, это поставить 2 divs рядом. '

' –

+2

Не зная подробнее о том, какой тип информации вы хотите отобразить, сложно что-либо рекомендовать. Пожалуйста, укажите больше контекста. – Oded

ответ

2

В зависимости от того, что вы пытаетесь воспроизвести.

С помощью простого примера, который вы указали, нелегко точно сказать, чего вы пытаетесь достичь, но если то, что вы пытаетесь сделать, это поставить два блока рядом (то есть, как столбцы на странице макет), вам просто нужно создать пару элементов <div> и создать их с помощью CSS, чтобы появляться рядом друг с другом. В зависимости от того, что вы хотите, существует несколько способов сделать таблицы стилей.

Одним из вариантов было бы установить их как float:left;. Используйте width:..., чтобы установить, насколько они вам нужны в пикселях или процентах.

Если float является слишком сложным для вас (и это довольно большой прыжок в концепции из табличного макета), вы можете рассмотреть возможность использования display:inline-block;. Это также позволит размещать <div> s рядом друг с другом, но дает вам больше контроля над тем, как они позиционируют себя.

И, наконец, если содержимое <table> фактически является таблицей данных, не бойтесь хранить его в таблице - тег <table> и его друзья по-прежнему действительны HTML и помещают табличные данные в таблицу. все еще хорошо.

0

Если вы имеете в виду, что вы хотите, чтобы отобразить два DIVs рядом с Афоризм, попробуйте использовать стили css float: left или float: right. используйте другой div с clear: left, clear: right или clear: оба для сброса следующих divs в нормальное поведение.

Вот ссылка объясняя больше о том, что:

http://www.w3schools.com/css/css_float.asp (нажмите на «попробовать его» ссылки на очень хорошие примеры)

Я не знаю, если это то, что вы ищете. .. но я надеюсь, что так!

Смежные вопросы