어디에서나 블록을 청소 해야하는 경우 테이블리스 디자인의 이점은 무엇입니까?

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

  •  03-07-2019
  •  | 
  •  

문제

나는 나아가는 목표를 이해한다 <div> 태그 <table> 더 의미가 있기 때문에 의미가 있습니다. 그러나 열 기반 레이아웃을 작동시키기 위해 여전히 청산 블록이 필요하다면 얻은 이점을 이해하지 못합니다. 예를 들어:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

외부 <br> 태그는 스타일을 설명하는 데 엄격하게 사용되며 레이아웃을 만들려면 필요합니다. 이것은 테이블을 제거함으로써 얻은 모든 혜택을 망치지 않습니까?

도움이 되었습니까?

해결책

내가 만약 네게 말했다면 너 그렇지 않았다 필요 청산 블록?

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}
<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

jsfiddle

다른 팁

테이블 데이터를 표시하는 경우 테이블을 사용하는 것이 여전히 더 합리적입니다. 현명한 도구를 사용하십시오. 테이블이 최상의 옵션 인 CSS를 맹목적으로 사용하지 마십시오.

나는 나아가는 목표를 이해한다 <div> 태그 <table> 더 의미가 있기 때문에 의미가 있습니다.

실제로, 그것은 정확히 반대입니다 : <table> 에게 <div> HTML을 만듭니다 더 적은 시맨틱. 사실, 요점 의 <div> (그리고 <span>) 요소가 있어야합니다 아니요 의미론!

내가 숲을 볼 때 항상 나를 진드기 <div>S는 "Semantic HTML"으로 설명됩니다. 아니요, 그렇지 않습니다! 그것은 *un- *시맨틱 html입니다! 특히 그것이 많이 포함된다면 <div class='float-left'>, <div id='bottom'> 그리고 내 개인적인 즐겨 찾기 <div class='paragraph'> 그리고 <span class='emphasis'>.

미용적이지 않은 것을 사용하여 잘못 이해하지 마십시오 <div>S는 사용하는 것보다 확실히 낫습니다 잘못된-증식 <table>s, 그러나 더 나은 것은 의미 적으로 사용하는 것입니다. 옳은 요소 - 많은 경우에 문제는 HTML이 제공하지 않는다는 것입니다. 예를 들어 스 니펫에서, 당신은 그것을 사용합니다 <address> 요소에 따르면 사양,이 요소는입니다 ~ 아니다 주소를 마킹하기위한 것입니다! 그것은이다 뿐 주소를 표시합니다 페이지의 저자- IOW는 완전히 쓸모가 없습니다.

게시 한 예제는 많은 컨텍스트가 없으므로 말하기는 어렵지만 실제로는 테이블 또는 계층 적 데이터를 표시하고 싶은 것처럼 보입니다. <table>s 또는 <ul>S가 더 나은 선택 일 수 있습니다.

당신의 질문과 완전히 관련이 없습니다 : 당신은 hcard 그리고 키스와 포옹 미세 기름.

전혀. 테이블 사용을 피하는 다른 이점이 많이 있습니다.

나는 개인적으로 클리어링 요구에 대해 Clearfix 해킹을 사용합니다. 

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

나는 단지 쉼표를 추가하는 대신 선택기를 분리하는 것을 주목합니다. clearfix 모든 것에 수업. 정말 잘 작동합니다. 유일한 문제는 zoom 속성은 IE 특정이며 검증되지 않지만 때로는 다른 속성과 같은 부작용이 없습니다. overflow: auto.

나는 문제없이 5 년 동안 전문 웹 사이트에서 이것을 사용해 왔습니다.

Annakata의 답변에서 알 수 있듯이, 청산 블록이 필요하지 않습니다. 그러나이 외에도 테이블을 피하는 데있어 한 가지 장점은 페이지를 점진적으로 렌더링 할 수 있다는 것입니다. 테이블은 할 때만 렌더링 할 수 있습니다 전체 모든 내용을 포함한 테이블은 구문 분석되었으며, 큰 페이지와 느린 연결이있는 경우 시간이 걸릴 수 있습니다. DIV는 즉시 렌더링 될 수 있습니다. 즉, 테이블보다 훨씬 빨리 사용자에게 사용 가능한 것을 제시 할 수 있습니다.

물론 이것은 단지 멋진 보너스 이점 일뿐입니다. 그렇지 않습니다. 그만큼 테이블을 피해야하는 이유 (비 회피 데이터의 경우)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top