Преобразование макета таблицы в Div

StackOverflow https://stackoverflow.com/questions/92842

  •  01-07-2019
  •  | 
  •  

Вопрос

Я реализую элемент управления комментариями, который использует ASP.Repeater для отображения каждого комментария.Сам комментарий в настоящее время отображается с использованием таблицы, в которой некоторые изображения разделены для отображения комментария в виде пузырька.

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

Есть ли у кого-нибудь какие-либо предложения, примеры, хаки для необходимого HTML/CSS, или мне следует просто придерживаться таблиц и надеяться на лучшее?

Это было полезно?

Решение

Лучшим ресурсом по созданию закругленных углов с использованием элементов DIV, который я видел, была статья «A List Apart» — см. http://alistapart.com/articles/customcorners/.Если вы хотите использовать элементы DIV для макета всего сайта, на этом сайте есть несколько других соответствующих статей.Видеть:

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

Другие советы

Есть несколько разных способов сделать закругленные углы в CSS

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

Короче говоря, вы хотели бы что-то вроде этого:

<style>
  .start { background-image: url("topofbubble.png"); height: <heightofimage>; }
  .end { background-image: url("bottomofbubble.png"); height: <heightofimage>; }
  .body {background-image: url("sliceofbubblemiddle.png"); }
</style>

...

<div class="comment">
  <span class="start"></span>
  <span class="body">I would like to say that div layouts are far better than table layouts.</span>
  <span class="end"></style>
</div>

Это должно помочь вам начать.Код специально я не пробовал и при необходимости могу сделать полный пример.

Если вы хотите представить пользователям IE острые углы, закругленные углы можно тривиально решить с помощью border-radius CSS-свойство.В настоящее время ни один браузер не реализует его как базовое свойство, но некоторые реализуют его как свойство с префиксом.Например, чтобы использовать его в Firefox, вы должны использовать свойство -moz-border-radius, для Safari используйте -webkit-border-radius, и т. д.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top