CSS에서 "이중"테두리 방지

테두리 가있는 두 개의 div가 나란히 있다고 가정합니다 ( https://chrome.google.com/webstore/category/home 참조).

내 div가 이중 테두리처럼 나타나지 않도록 방지하는 방법 (가급적 CSS 트릭)이 있습니까? 내가 의미하는 바를 더 잘 이해하려면이 이미지를보십시오.

두 div가 만나는 곳에서 이중 테두리가있는 것처럼 보입니다.

#divNumberOne { border-right: 0; }

특정 순서로 표시 될 수없는 요소 (한 행에 3 개 요소, 2 개 요소가있는 행 등)에 대해 이야기하는 경우 컬렉션의 모든 요소에 배치 할 수있는 요소를 원합니다. . 이 솔루션은 다음을 포함해야합니다.

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

개요는 이전 브라우저 (IE7 이하) 에서 작동하지 않습니다 .

또는 테두리를 유지하고 음수 여백을 사용할 수 있습니다.

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

HTML :

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS :

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

데모

IE8 지원을 위해 ie9.js 를 포함 합니다 (모든 CSS 선택자 / 의사 요소에 매우 유용합니다).

고려할 수있는 또 다른 해결책은 CSS Adjacent 형제 선택기를 사용하는 것 입니다.

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

이것을 달성하기 위해 홀수 선택기를 사용할 수 있습니다.

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

div의 클래스 이름이 모두 동일한 경우 :

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

여기에 JSFiddle 데모가 있습니다.

나는 쇼에 늦었지만 다음과 같이 outline 속성을 사용해보십시오.

.item {
  outline: 1px solid black;
}

CSS의 외곽선은 물리적 공간을 차지하지 않으므로 이중 테두리를 방지하기 위해 겹칩니다.

오른쪽의 div에 다음 CSS를 추가합니다.

position: relative;
left: -1px; /* your border-width times -1 */

또는 테두리 중 하나를 제거하십시오.

난 그냥 사용

border-collapse: collapse;

부모 요소에서

Flexbox를 사용하여 두 번째 자식 컨테이너를 추가하여 윤곽선이 서로 겹치도록 적절하게 만들어야했습니다.

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

SCSS

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

  <div class="one"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>

CSS :

  .one{
    width:100px;
    height:100px;
    border:thin red solid;
    float:left;
  }
.two{
    width:100px;
    height:100px;
    border-style: solid solid solid none;

    border-color:red;
    border-width:1px;
    float:left;
}

jsFiddle

내 사용 사례는 마지막 요소가 무엇인지 알고있는 단일 행의 상자에 대한 것이 었습니다.

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

나는 이것이 늦은 반응이라는 것을 알고 있지만, 내 방식이 여기에 없기 때문에 2 센트 가치를 떨어 뜨리고 싶었습니다.

나는 마진, 특히 마이너스 마진을 가지고 노는 것을 정말로 좋아하지 않습니다 . 모든 브라우저는 조금씩 다르게 처리하는 것으로 보이며 여백은 많은 상황에 쉽게 영향을받습니다 .

div가있는 멋진 테이블이 있는지 확인하는 내 방법은 먼저 좋은 html 구조 를 만든 다음 CSS를 적용하는 것입니다.

수행 방법의 예 :

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

이제 CSS의 경우 단순히 행 구조를 사용하여 테두리가 필요한 위치에만 있는지 확인하여 여백이 없도록합니다.

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

Et voila, 완벽한 테이블. 자, 분명히 이것은 당신의 DIV가 1px의 너비 차이를 갖도록 만들 것입니다 (특히 첫 번째 것).하지만 저에게는 어떤 종류의 문제도 일으키지 않았습니다. 당신의 상황에서 그럴 경우, 나는 당신이 마진에 더 의존 할 것이라고 생각합니다.

이 코드를 사용하여 얻을 수있었습니다.

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

매우 오래된 질문이지만 첫 번째 Google 결과 였으므로이 문제를 접하고 모바일에서 요소의 오른쪽 / 왼쪽에 테두리를 다시 추가하는 미디어 쿼리를 원하지 않는 사람에게는

내가 사용하는 솔루션은 다음과 같습니다.

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

이것은 테두리와 그림자로 구성된 요소 주위에 2px 테두리가 표시되기 때문에 작동합니다. 그러나 요소가 만나는 곳에서는 그림자가 겹쳐져 2px 너비를 유지합니다.

margin:1px;당신의 div 주위 에주는 것은 어떻습니까?

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
    <div class="brd"></div>
    <div class="brd"></div>
    <div class="brd"></div>
</body>
</html>

데모

나는 배경으로 다른 div를 사용하고 모든 테두리를 삭제하는 것을 선호합니다. 배경 div의 크기와 전경 div의 위치를 ​​계산하기 만하면됩니다.