Таблица делает <td> отзывчивым

Question

Таблица делает <td> отзывчивым

0

У меня три акции: facebook, google, твиттер. На больших экранах он работает нормально, но в маленьких твиттер-сайтах скрывается за пределами, и я хотел бы, чтобы элемент автоматически закрепил себя с другой строкой.

http://jsfiddle.net/ruhnq/46/

Jsfiddle выше, вероятно, будет отлично работать на вашем экране. Но представьте, что у вас меньше, вот как это выглядит: http://quirktools.com/screenfly/#u=http%3A//jsfiddle.net/ruhnq/46/&w=1024&h=600

<table style='border: 1px solid #ccc; float: right; width: 37%; display: block'>

Как я могу избежать этого?

user3243925 19 фев. 2014, в 16:47

Источник

Теги:

html

css

3 ответа

0

Не используйте таблицы, используйте divs и floats вместо

.social-container{
  border:1px solid #ccc;
  float:right;
}

.social-item{
  float:left;    
}

jsFiddle

RobinvdA 19 фев. 2014, в 13:55

0

возможно, попробуйте: td {display: inline-block;}

Alvaro Menéndez 19 фев. 2014, в 13:44

0

jsfiddle.net/ruhnq/60 Но учтите, что в основном ... вы отменяете все преимущества, которые хотели получить, используя стол ... и если вы не возражаете, не усложняйте, не делайте т использовать таблицу и стиль div
Alvaro Menéndez 19 фев. 2014, в 15:11

Ещё вопросы

jsfiddle.net/ruhnq/60 Но учтите, что в основном ... вы отменяете все преимущества, которые хотели получить, используя стол ... и если вы не возражаете, не усложняйте, не делайте т использовать таблицу и стиль div

Nick R · Accepted Answer · 2014-02-19T12-10-00.000Z

Не используйте таблицы для не табличных данных.

Вы можете обернуть кнопки в div и дать ему ширину.

Например:

.test { width: 25%; border:1px solid red; }

Демо-версия JSFiddle

Мы постоянно учимся. Работает отлично.