테이블 레이아웃을 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