떠 다니는 내부 부위를 가장 높은 div와 같은 높이로 만드는 방법

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

  •  22-08-2019
  •  | 
  •  

문제

다음 코드에서는 'y'가있는 div가 div의 높이와 3 'x와 일치하도록 원합니다.

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
    x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
    y
</div>

주목할만한 것은 내부 div가 떠 다니는 것입니다.

도움이 되었습니까?

해결책

jQuery 지점에 불리하지 않으면 사용할 수 있습니다. 동등한, 그것은 당신이 원하는 것을해야합니다

다른 팁

목록에서 본 솔루션이 있었는데 (내 생각은) 두 개의 내부 열에 거대한 바닥 패딩을 제공하지만 음수 마진과 같은 큰 가치가있었습니다. 이 모든 것이 기둥의 높이가 32000px를 넘지 않는 한 작동하며 드물게 작동합니다. 같은 것 :

.col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

... 여기서 "col"은 모든 열의 클래스 이름입니다. 그런 다음 별도의 클래스로 좋아하는 개별 열을 스타일링 할 수 있습니다.

<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

또 다른 옵션은 경계 등을 포함하여 외부 DIV에서 배경 이미지를 사용하는 것입니다.이 접근법은 분명히 일단 설치 한 열 (폭, 색상)을 변경하기가 조금 더 어렵다는 것을 의미합니다.

세 가지 옵션이 있습니다.

  1. 내부 디브를 바깥 쪽 다이버만큼 높게 만듭니다. 이것은 너무 어렵지 않습니다.
  2. 내부 Divs를 다른 div 안에 넣고 높이 및/또는 최소값을 100% 사용하여 포함 된 div만큼 높게 만들어내는 DIV가 포함 된 DIV가 포함되어 있지 않다고 생각합니다. div 또는 페이지. 그래도 샷의 가치가있을 수 있습니다. 또는 가장 쉬운
  3. 테이블을 사용하십시오. 이 문제는 테이블과 함께 사소합니다. 좋은 예입니다 순수한 CSS 결함.

두 개의 divs "공유"높이에 대한 간단한 방법은 없습니다. 100% 높이와 같은 트릭에는 사용해야하는 CSS 속성과 사용중인 국경과 관련하여 크로스 브라우저 문제가 있습니다. 국경은 일반적으로 사용하는 모든 높이에 추가됩니다.

일부는 사용 디스플레이를 사용한다고 말할 수도 있지만 테이블 셀이지만 지원은 다소 제한적입니다 (즉).

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