플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

programing

플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

bestprogram 2023. 8. 10. 19:02

플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

페이지 구조는 다음과 같습니다.

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

이, 제.child-left더 내용을 에 DIV는 더많가것질이고를그, ▁div,.parentDIV의 키는 어린이 DIV에 따라 커집니다.

는 하만문입니다.child-right높이가 증가하지 않습니다.어떻게 하면 그것의 높이를 그것의 부모와 같게 만들 수 있습니까?

의 parent요소, 다음 속성을 추가합니다.

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

그렇다면.child-right다음 항목:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

여기에서 CSS 예제를 사용하여 더 자세한 결과를 확인하고 동일한 높이 열에 대한 자세한 정보를 확인하십시오.

이 문제에 대한 일반적인 해결 방법은 절대 위치 지정 또는 자르기 플로트를 사용하지만, 열이 숫자+크기로 변경되는 경우 광범위한 조정이 필요하고 "주" 열이 항상 가장 길어야 한다는 점에서 까다롭습니다.대신 다음 세 가지 강력한 솔루션 중 하나를 사용하는 것이 좋습니다.

display: flex가장 간단하고 최상의 솔루션이며 매우 유연하지만 IE9 이상에서는 지원되지 않습니다.
table또는display: table매우 단순하고, 매우 호환되며(대부분의 브라우저에서), 매우 유연합니다.
display: inline-block; width:50%마이너스 마진 해킹으로: 꽤 간단하지만, 기둥 아래쪽 경계는 약간 까다롭습니다.

1. `display:flex`

이것은 정말 간단하며 더 복잡하고 더 세부적인 레이아웃에 쉽게 적응할 수 있습니다. 그러나 Flexbox는 다른 최신 브라우저와 함께 IE10 이상에서만 지원됩니다.

예: http://output.jsbin.com/hetunujuma/1

관련 html:

<div class="parent"><div>column 1</div><div>column 2</div></div>

관련 css:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox는 훨씬 더 많은 옵션을 지원하지만, 위의 열 수에 상관없이 사용할 수 있습니다.

2.`<table>`또는`display: table`

위한 호환되는 ▁a은을 사용하는 입니다.table오래된 IE 지원이 필요한 경우 먼저 시도해 보는 것이 좋습니다.당신은 열을 다루고 있습니다. div + float는 단순히 그것을 하는 가장 좋은 방법이 아닙니다. (CSS 제한을 해킹하기 위해 여러 수준의 중첩된 div는 단순한 테이블을 사용하는 것보다 더 "의미적"인 것은 말할 것도 없습니다.)사용하지 않으려는 경우table요소, css(IE7 이상에서 지원되지 않음)를 고려합니다.

예: http://jsfiddle.net/emn13/7FFp3/

관련 html: (단, 일반 사용을 고려합니다.<table>대신)

<div class="parent"><div>column 1</div><div>column 2</div></div>

관련 css:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

이 접근 방식은 사용하는 것보다 훨씬 더 강력합니다.overflow:hidden부유물로원하는 만큼 열을 추가할 수 있습니다. 원하는 경우 열을 자동으로 확장할 수 있습니다. 또한 고대 브라우저와의 호환성도 유지할 수 있습니다.플로트 솔루션이 요구하는 것과 달리 어떤 열이 가장 긴지 미리 알 필요도 없습니다. 높이가 적절히 조정됩니다.

키스: 특별히 필요한 경우가 아니라면 부유식 해킹을 사용하지 마십시오.IE7이 문제라면 언제든지 유지하기 어렵고 유연성이 떨어지는 Trick-CSS 솔루션보다 의미 열이 있는 일반 테이블을 선택할 것입니다.

그런데, 만약 당신의 레이아웃이 반응하기 위해 필요하다면 (예를 들어, 소형 휴대전화에 열이 없는) 당신은@media너비에 - 사용자가 할 수 .<table> 타기.display: table요소

3. `display:inline block`마이너스 마진 해킹으로.

또 다른 대안은 다음과 같습니다.display:inline block.

예: http://jsbin.com/ovuqes/2/edit

관련 html: (사이에 공백이 없음)div태그가 중요합니다!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

관련 css:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

이는 약간 까다로우며, 마이너스 마진은 열의 "진정한" 하단이 가려져 있음을 의미합니다.이는 결국 해당 열의 아래쪽을 기준으로 어떤 것도 배치할 수 없다는 것을 의미합니다. 이는 해당 열의 아래쪽이 다음과 같이 잘리기 때문입니다.overflow: hidden인라인 블록 외에도 플로트에서도 비슷한 효과를 얻을 수 있습니다.

TL;DR: IE9 이전 버전을 무시할 수 있으면 flexbox를 사용하고, 그렇지 않으면 (css) 테이블을 사용합니다.두 옵션 모두 사용할 수 없는 경우 마이너스 마진 해킹이 발생하지만, 이로 인해 개발 중에 놓치기 쉬운 이상한 디스플레이 문제가 발생할 수 있으며 레이아웃 제한 사항에 주의해야 합니다.

상위 항목:

display: flex;

어린이용:

align-items: stretch;

접두사를 추가해야 합니다. 캐니우스를 확인하십시오.

나는 많은 답을 찾았지만, 아마도 나에게 가장 좋은 해결책은

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

다른 솔루션은 여기에서 확인할 수 있습니다. http://css-tricks.com/fluid-width-equal-height-columns/

div를 상를 div 다설정십시오하로로 .overflow: hidden
그런 다음 하위 Div에서 패딩-바텀에 대해 많은 양을 설정할 수 있습니다.예를들면
padding-bottom: 5000px
그리고나서margin-bottom: -5000px
그러면 모든 아이 디브는 부모의 키가 될 것입니다.
div에 넣으려고 , 거예요.

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

예: http://jsfiddle.net/Tareqdhk/DAFEC/

부모님은 키가 큰가요?이렇게 부모님 키를 맞추면 됩니다.

div.parent { height: 300px };

그러면 아이를 이렇게 최대 높이까지 뻗게 할 수 있습니다.

div.child-right { height: 100% };

편집

다음은 JavaScript를 사용하여 작업하는 방법입니다.

CSS 테이블 디스플레이는 다음에 적합합니다.

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

원래 답변(열이 더 클 수 있다고 가정):

부모의 키가 자녀의 키에 따라 달라지게 하고 자녀의 키가 부모의 키에 따라 달라지도록 하려고 합니다.계산이 안 됩니다.CSS Faux 열이 가장 좋은 해결책입니다.그렇게 하는 방법은 여러 가지가 있습니다.저는 자바스크립트를 사용하지 않는 편이 낫습니다.

댓글 섹션에 사용했습니다.

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

당신은 아동 권리를 오른쪽으로 띄울 수 있지만, 이 경우 저는 각 디비의 폭을 정확하게 계산했습니다.

나는 최근에 jQuery를 사용하여 내 웹사이트에서 이것을 했습니다.코드는 가장 높은 div의 높이를 계산하고 다른 div를 동일한 높이로 설정합니다.기술은 다음과 같습니다.

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

나는믿않는 믿지 않습니다.height:100%작동할 것이기 때문에, 만약 당신이 div 높이를 명시적으로 모른다면, 나는 순수한 CSS 솔루션이 없다고 생각합니다.

부트스트랩을 알고 있는 경우 'flex' 속성을 사용하여 쉽게 부트스트랩을 수행할 수 있습니다.당신이 해야 할 일은 css 아래 속성을 부모 div에게 전달하는 것입니다.

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

.homepageSection제 부모님은 디브입니다.를 child div로 합니다.

<div class="abc col-md-6">
<div class="abc col-md-6">

여기서 abc는 나의 아이 디브입니다.어린이 div에 경계선을 지정하는 것만으로 국경에 관계없이 두 어린이 div의 높이가 동일한지 확인할 수 있습니다.

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

저는 아이디어를 내기 위해 인라인 스타일을 사용했습니다.

나는 수용된 답변이 다음과 같은 뜻으로 사용법을 의미합니다.position: absolute;에 float: left을 사용하고 싶은 .float: left과 같은 음과같은구조로다,로,

<div class="parent">
    <div class="child-left floatLeft"></div>
    <div class="child-right floatLeft"></div>
</div>

줘를 position: auto;자녀 키를 포함하도록 부모에게 전달합니다.

.parent {
    position: auto;
}
.floatLeft {
    float: left
}

저는 인턴십 인터뷰에서 이 깔끔한 속임수를 배웠습니다.원래 질문은 세 개의 열에 있는 각 상위 성분의 높이가 사용 가능한 모든 내용을 표시하는 높이와 동일한지 확인하는 방법입니다.기본적으로 최대 높이를 렌더링하는 보이지 않는 하위 구성 요소를 만듭니다.

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>

언급URL : https://stackoverflow.com/questions/4804581/how-can-i-expand-floated-child-divs-height-to-parents-height

'programing' 카테고리의 다른 글

json에 일반적인 방법으로 존재하는 배열 요소에서 열 형성 (0)	2023.08.15
C에서 C++의 신규/삭제와 동등한 것은 무엇입니까? (0)	2023.08.15
Flask 서버에서 콘솔 메시지 사용 안 함 (0)	2023.08.10
좋아요와 좋아요가 반대 결과를 반환하지 않음 (0)	2023.08.10
MS 액세스에서 반올림 (0)	2023.08.10

현재글플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

MYSQL, bash, mariadb, c, Android, json, mongodb, Wordpress, spring-boot, Oracle, reactjs, jquery, sql-server, git, python, Excel, angularJS, ASP.NET, ajax, Angular,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

bestprogram

플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

1. `display:flex`

2.`<table>`또는`display: table`

3. `display:inline block`마이너스 마진 해킹으로.

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

플로팅 차일드 디브의 키를 부모 키로 확장하려면 어떻게 해야 합니까?

1. display:flex

2.<table>또는display: table

3. display:inline block마이너스 마진 해킹으로.

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

1. `display:flex`

2.`<table>`또는`display: table`

3. `display:inline block`마이너스 마진 해킹으로.