다른 div의 아래쪽 근처에 div 배치

102

외부 div와 내부 div가 있습니다. 외부 div 하단에 내부 div를 배치해야합니다.

외부 div는 탄력적입니다 (예 : 너비 : 70 %). 또한 내부 블록을 중앙에 배치해야합니다.

설명 된 메이크업의 간단한 모델은 아래 그림에 나와 있습니다.

여기에 이미지 설명 입력

html css layout

— 로마 인
소스

높이도 탄력적입니까? 그렇지 않은 경우 내부 상자의 여백 상단을 (outerBoxHeight-innerBoxHeight)로 설정할 수 있습니다.

— peirix

@peirix : 예, 외부 블록의 높이는 변경 될 수 있지만 우리는 모릅니다

— Roman

79

Firefox 3, Chrome 1 및 IE 6, 7 및 8에서 테스트 및 작업 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

라이브 버전 : http://jsfiddle.net/RichieHindle/CresX/

— RichieHindle
소스

감사합니다. 귀하의 솔루션은 거의 정확합니다. IE의 녹색 블록 스타일에 "// margin-left : -40px"만 추가하면되었습니다. margin-left 속성이있는이 해킹이 없으면 녹색 블록이 IE7에 남아 있습니다. 누구든지이 40px의 출처를 설명 할 수 있습니까?

— Roman

IE7은 "Outer"라는 단어 뒤에 녹색 div를 수평으로 배치했습니다. "left : 0"을 지정하도록 코드를 업데이트했습니다.

— RichieHindle

13

중앙에 배치하려면 하단에 래핑 div가 필요합니다.

<style>
   /* making it look like your nice illustration */
   #outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
   #inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }

   /* positioning the boxes correctly */
   #outer { position: relative; }
   #wrapper { position: absolute; bottom: 3px; width: 100%; }
   #inner { margin: 0 auto; }
</style>


<div id="outer">
   <div id="wrapper"><div id="inner"></div></div>
</div>

— Magnar
소스

7

CSS3를 Flexbox사용하면 하단 위치를 매우 쉽게 지정할 수 있습니다. Flexbox 지원 표 확인

HTML

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

.outer {
  display: flex;
  justify-content: center; /* Center content inside */
}
.inner {
  align-self: flex-end; /* At the bottom of the parent */
}

산출:

코드 스 니펫 표시

.outer {
  background: #F2F2CD;
  display: flex;
  width: 70%;
  height: 200px;
  border: 2px solid #C2C2C3;
  justify-content: center;
}
.inner {
  background: #FF0081;
  width: 75px;
  height: 50px;
  border: 2px solid #810000;
  align-self: flex-end;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

스 니펫 확장

— m4n0
소스

5

IE6을 포함한 모든 브라우저에서 잘 작동합니다.

<style>
    #outer{
        width: 70%;
        background-color: #F2F2CC;
        border: 1px solid #C0C0C0;
        height: 500px;
        position: relative;
        text-align: center;
    }

    #inner{
        background-color: #FF0080;
        border: 1px solid black;
        width: 30px;
        height: 20px;

        /* Position at the bottom */
        position: relative;
        top: 95%;

        /* Center */
        margin: 0 auto;
        text-align: left;
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

— 드미트리 파르 코프
소스

상위 95 %는 하위 10px를 말하는 것과 다릅니다. 화면 크기가 조정될 때 내부 상자가 아래쪽에 고정되도록합니다.

— user959690