float를 사용하여 요소에 적절한 테두리 적용 : 왼쪽

(실제 질문은 아래의 행을 참조하십시오. 자세한 설명이 필요하면 상단 설명을 참조하십시오).float를 사용하여 요소에 적절한 테두리 적용 : 왼쪽

CSS에서 : last-child와 : first-child는 함께 작업 할 수있는 좋은 옵션을 제공합니다. 테이블에는 강력한 텍스트와 CSS 선택기를 사용하여 타겟팅 할 수있는 태그가 더 많으므로이 도구를 사용하면 테이블의 모든 셀 주위에 적절한 경계를두기가 쉽고 두 번 테두리가 나타나지 않습니다.

각각을 다른 것 아래에 나타나는 DIV 목록에 적용하면 가장 간단한 것이므로 마지막 자식의 아래쪽 테두리를 제거해야합니다.

:하지만

폭들의 합은 타겟 컨테이너 및 원인의 폭을 초과하기 전에 전 (행 예 3 서로 말하고 다음 플로트 된 DIV리스트를 사용할 때 그들을 포장하기 위해), 나는 항상 약간의쪽에 약간의 이중의 경계와 함께 일어나있게 끝난다.

깔끔하고 깨끗한 CSS 솔루션이 있습니까?

출처

2012-10-22 SquareCat

난 당신이 단순히 찾고있는 솔루션의 종류가 불가능하다고 생각합니다. 표를 사용할 때 브라우저는 td 및 th 요소가 모두 tr에 속하고 그룹으로 보이는 방식을 결정하기위한 간단한 규칙이 있음을 알 수 있습니다.

Divs는 매우 다릅니다 (정당하게 그렇게). 순수하게 html과 css를 사용하여 그러한 연관성을 만들 수있는 방법이 없습니다. the children of this div are going to be on the same row, so they should all share a border과 같은 말을하는 방법을 의미 할 방법이 없습니다.

해결 방법은 충분히 간단하다

http://jsfiddle.net/8uqae/

는 단순히 오른쪽에있는 div의 나머지 부분을 제공 한 후 테두리를 끝 사업부위한 특별한 클래스를 생성합니다.

HTML :

<div> 
    <div class="left-end fl"></div> 
    <div class="middle fl"></div> 
    <div class="middle fl"></div> 
    <div class="middle fl"></div> 
    <div class="middle fl"></div> 
    <div class="middle fl"></div> 
    <div class="clr"></div> 
</div>

CSS : 지적

.fl { 
    float: left; 
} 
.clr { 
    clear: both; 
} 
.left-end, .middle { 
    width: 30px; 
    height: 20px; 
    margin: 0; 
    padding: 0; 
    border-top: solid 1px black; 
    border-right: solid 1px black; 
    border-bottom: solid 1px black; 
} 

.left-end { 
    border-left: solid 1px black; 
}

srini,이에 도움과에보고 가치가 거기에 프레임 워크가있다. 다양한 크기의 화면에서 브라우저 간 반응 형 div 레이아웃은 까다로울 수 있으므로 Twitter Bootstrap과 같은 프레임 워크를 고려하면 가치가 있습니다.

출처

2012-10-22 22:45:55 Dave

이 입력 해 주셔서 감사합니다. 나는 이것을 수년간 해왔지만, 그 부분에 익숙해 져야한다는 것은 나에게 미친 짓이다.하지만 HTML을 수정하지 않고도 순수한 CSS를 사용하는 것이 옳을 수도있다. – SquareCat

좋은 지적. 내 다음 프로젝트에서는 이것을 확실히 살펴볼 것입니다! 고마워! – SquareCat