나는 몇 개의 컨테이너를 가지고 있으며 그들의 아이들은 절대적 / 상대적으로 위치합니다. 아이들이 컨테이너 안에 들어갈 수 있도록 컨테이너 높이를 설정하는 방법은 무엇입니까?
코드는 다음과 같습니다.
HTML
<section id="foo">
<header>Foo</header>
<article>
<div class="one"></div>
<div class="two"></div>
</article>
</section>
<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->
<section id="bar">
<header>bar</header>
<article>
<div class="one"></div><div></div>
<div class="two"></div>
</article>
</section> CSS
article {
position: relative;
}
.one {
position: absolute;
top: 10px;
left: 10px;
background: red;
width: 30px;
height: 30px;
}
.two {
position: absolute;
top: 10px;
right: 10px;
background: blue;
width: 30px;
height: 30px;
}여기 jsfiddle이 있습니다. “막대”텍스트가 4 개의 사각형 뒤에 표시되지 않고 표시되기를 원합니다.
쉬운 수정이 있습니까?
이 아이들의 키를 모르고 컨테이너의 높이를 xxx로 설정할 수 없습니다.
답변
당신이 올바르게하려는 일을 이해한다면, 아이들을 절대적으로 위치를 유지하면서 CSS로 이것이 가능하다고 생각하지 않습니다.
절대적으로 배치 된 요소는 문서 흐름에서 완전히 제거되므로 해당 치수는 상위의 치수를 변경할 수 없습니다.
당신이 경우 정말 달성했다으로 아이들을 유지하면서이 영향을 position: absolute당신은 그들이 렌더링 한 후 절대 위치 아이들의 높이를 찾는하여 자바 스크립트로 그렇게 할 수있는, 부모의 높이를 설정하는 것을 사용.
또는 float: left/ float:right및 여백을 사용 하여 자식을 문서 흐름에 유지하면서 동일한 위치 지정 효과를 얻은 다음 overflow: hidden부모 (또는 다른 clearfix 기술)에서 사용하여 높이를 자식 높이로 확장 할 수 있습니다.
article {
position: relative;
overflow: hidden;
}
.one {
position: relative;
float: left;
margin-top: 10px;
margin-left: 10px;
background: red;
width: 30px;
height: 30px;
}
.two {
position: relative;
float: right;
margin-top: 10px;
margin-right: 10px;
background: blue;
width: 30px;
height: 30px;
}답변
다음은 내 해결 방법입니다
. 귀하의 예제에서는 .one & .two 요소의 “동일한 스타일” 을 사용하지만 절대 위치가없고 가시성이 숨겨진 세 번째 요소를 추가 할 수 있습니다 .
HTML
<article>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</article>CSS
.three{
height: 30px;
z-index: -1;
visibility: hidden;
}답변
이것은 늦은 답변이지만 소스 코드를 살펴보면 비디오가 전체 화면 일 때 “mejs-container-fullscreen”클래스가 “mejs-container”요소에 추가된다는 것을 알았습니다. 따라서이 클래스를 기반으로 스타일링을 변경할 수 있습니다.
.mejs-container.mejs-container-fullscreen {
// This rule applies only to the container when in fullscreen
padding-top: 57%;
}또한 CSS를 사용하여 MediaElement 비디오를 유동적으로 만들고 싶다면 Chris Coyier의 훌륭한 트릭입니다. http://css-tricks.com/rundown-of-handling-flexible-media/
CSS에 다음을 추가하십시오.
.mejs-container {
width: 100% !important;
height: auto !important;
padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
width: 100% !important;
height: 100% !important;
}
.mejs-mediaelement video {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
}도움이되기를 바랍니다.
답변
이러한 종류의 레이아웃 문제는 이제 flexbox로 해결할 수 있으므로 높이를 알거나 절대 위치 또는 부동으로 레이아웃을 제어 할 필요가 없습니다. OP의 주요 질문은 부모가 키를 알 수없는 자식을 포함하도록하는 방법이었으며 특정 레이아웃 내에서 수행하기를 원했습니다. 부모 컨테이너의 높이를 “fit-content”로 설정하면 이렇게됩니다. “display : flex”와 “justify-content : space-between”을 사용하면 OP가 만들려고했던 섹션 / 열 레이아웃이 생성됩니다.
<section id="foo">
<header>Foo</header>
<article>
<div class="main one"></div>
<div class="main two"></div>
</article>
</section>
<div style="clear:both">Clear won't do.</div>
<section id="bar">
<header>bar</header>
<article>
<div class="main one"></div><div></div>
<div class="main two"></div>
</article>
</section>
* { text-align: center; }
article {
height: fit-content ;
display: flex;
justify-content: space-between;
background: whitesmoke;
}
article div {
background: yellow;
margin:20px;
width: 30px;
height: 30px;
}
.one {
background: red;
}
.two {
background: blue;
}OP의 바이올린을 수정했습니다.
http://jsfiddle.net/taL4s9fj/
flexbox의 css-tricks :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
답변
그리드로 할 수 있습니다.
article {
display: grid;
}
.one {
grid-area: 1 / 1 / 2 / 2;
}
.two {
grid-area: 1 / 1 / 2 / 2;
}답변
이것은 또 다른 늦은 대답이지만 네 개의 사각형 사이에 “막대”텍스트를 배치하는 매우 간단한 방법을 알아 냈습니다. 내가 변경 한 내용은 다음과 같습니다. 막대 섹션에서 나는 센터와 div 태그 안에 “bar”텍스트를 감쌌다.
<header><center><div class="bar">bar</div></center></header>그리고 CSS 섹션에서 위의 div 태그에 사용되는 “bar”클래스를 만들었습니다. 이것을 추가 한 후 막대 텍스트는 4 개의 컬러 블록 사이에 중앙에 위치했습니다.
.bar{
position: relative;
}답변
