컨테이너의 여백 높이 (

) 이것은 아마도 오래된 문제 일 수 있지만 그 답을 찾을 수 없습니다. 필요한 것은 다음과 같습니다.컨테이너의 여백 높이 (

높이가 창 크기에 따라 달라지는 부동 컨테이너 div.
컨테이너의 크기에 따라 세로 위치가 다른 고정 된 크기의 div입니다.
# 2의 오른쪽 아래에 다른 고정 크기 div가 있습니다.

다음 코드는 조건 # 1과 # 3을 만족합니다. 창의 크기를 조정하면 컨테이너 div의 크기가 올바르게 조정되고 두 번째 내부 div는 첫 번째 내부 div 아래 올바르게 배치됩니다.

그러나 조건 # 2는 충족되지 않습니다. "margin-top"을 백분율로 사용하면 상위 컨테이너의 높이에 따라 값이 달라 지겠지만 분명히 그렇게 작동하지는 않습니다. 창 크기를 조정하면 컨테이너 div 내의 내부 div의 수직 위치에 아무런 영향을 미치지 않습니다.

이것은 그렇게 열심히해야하는 것처럼 보이지 않지만, 그것은 미쳤습니다! 도와주세요!

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>css test</title> 
    <style>html, body {height: 100%;}</style> 
</head> 
<body> 
    <div style="height: 50%; width: 100px; float: left; background-color: #C00; text-align: center;"> 
    <div style="margin-top: 50%; height: 40px; width: 40px; background-color: #0C0;"></div> 
    <div style="height: 40px; width: 40px; background-color: #00C;"></div> 
    </div> 
</body> 
</html>

출처

2013-08-21 nttaylor

위치 모두 내부 div의 포장 다른 래퍼 사업부를 추가 : 여기

<div style="height: 50%; width: 100px; float: left; background-color: #C00; text-align: center; position: relative;"> 
    <div style="position: absolute; top: 50%; margin-top: -20px;"> 
     <div style="height: 40px; width: 40px; background-color: #0C0;"></div> 
     <div style="height: 40px; width: 40px; background-color: #00C;"></div> 
    </div> 
</div>

과 JS 바이올린을 그것을 시도 : http://jsfiddle.net/maysora/RFevT/

출처

2013-08-21 05:49:52 Roy

멋진! 나는 아직도 브라우저가 나의 원래 버전에서하는 포지셔닝이 왜 생겼는지 이해하지 못한다. 그러나 나는 그것으로 살 수있다. – nttaylor

컨테이너의 여백 높이 (

답변

관련 문제