컨테이너 하단에 div를 띄우려면 어떻게해야합니까?

float : right (또는 왼쪽)를 여러 번 사용하여 컨테이너 상단에 이미지와 삽입 상자를 띄 웠습니다. 최근에 다른 div의 오른쪽 하단에서 div를 부동으로 사용할 수있는 일반 텍스트 줄 바꿈으로 div를 플로팅해야합니다 (텍스트는 왼쪽과 왼쪽으로 만 줄 바꿈).

float에는 최하위 값이 없지만이 방법이 상대적으로 쉬워야한다고 생각했지만 여러 기술을 사용하여 웹을 검색 할 수 없었고 웹 검색에서 절대 위치 지정을 사용하는 것 외에는 아무것도 찾지 못했습니다. 올바른 단어 줄 바꿈 동작을 제공하십시오.

나는 이것이 매우 일반적인 디자인이라고 생각했지만 분명히 그렇지 않습니다. 아무도 제안이 없다면 텍스트를 별도의 상자로 나누고 div를 수동으로 정렬해야하지만 다소 혼란 스럽기 때문에 필요한 모든 페이지에서 수행 해야하는 것을 싫어합니다.

편집 : 여기 오는 사람을위한 메모. 위에서 중복으로 연결된 질문은 실제로 중복이 아닙니다. 삽입 된 요소를 텍스트로 감싸 야한다는 요구 사항으로 인해 텍스트가 완전히 달라집니다. 실제로 여기서 가장 많이 투표 된 답변에 대한 답변을 통해 연결된 질문의 답변이이 질문에 대한 답변으로 왜 틀린지 알 수 있습니다. 어쨌든 여전히이 문제에 대한 일반적인 해결책은 없지만 여기에 링크 된 질문에 게시 된 솔루션 중 일부는 특정 경우에 작동 할 수 있습니다.

부모 div를로 설정하고 position: relative내부 div를 ...로 설정하십시오 .

position: absolute; 
bottom: 0;

... 그리고 거기에 간다 :)

작동시키는 방법은 다음과 같습니다.

• 요소를 평소처럼 떠 다니십시오.

• 를 사용하여 부모 div를 180도 회전

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

  JSfiddle : http://jsfiddle.net/wcneY/

• 이제 왼쪽으로 떠 다니는 모든 요소를 ​​180도 회전시켜 다시 180도 회전시킵니다. 짜잔! 그들은 바닥에 뜬다.

며칠 동안 다양한 기술로 어려움을 겪은 후에는 이것이 불가능한 것으로 보입니다. javascript (원치 않는)를 사용하더라도 가능하지 않은 것 같습니다.

이해하지 못하는 사람들을 명확히하기 위해-이것이 내가 찾고있는 것입니다 : 게시 할 때 밑면이 마지막 바닥과 정렬되도록 삽입물 (그림, 테이블, 그림 등)을 레이아웃하는 것이 일반적입니다 페이지의 어느쪽에 있는지에 따라 텍스트가 인세 트 주변에서 자연스럽게 위 또는 오른쪽 또는 왼쪽으로 흐르는 블록 (또는 페이지)의 텍스트 라인. html / css에서는 float 스타일을 사용하여 블록 상단과 삽입물의 상단을 정렬하는 것이 쉽지만 놀랍게도 일반적인 레이아웃 작업에도 불구하고 텍스트 하단과 삽입을 시작하는 것은 불가능한 것처럼 보입니다. .

누군가 마지막 순간에 대한 제안이 없으면이 항목의 디자인 목표를 다시 방문해야한다고 생각합니다.

JQuery에서 부동 오른쪽 위에 너비가 0 인 스트럿 요소를 배치 한 다음 부모 높이에서 플로팅 된 어린이의 높이를 뺀 스트럿 (또는 파이프)의 크기를 조정하여이를 달성했습니다.

js가 시작되기 전에 위치 절대 접근 방식을 사용하고 있지만 작동하지만 텍스트 흐름이 뒤떨어집니다. 따라서 스트럿 접근 방식을 활성화하기 위해 정적 위치로 전환합니다. (헤더는 부모 요소이고 컷 아웃은 오른쪽 아래에 있고 파이프는 내 스트럿입니다)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

파이프는 1 위, 컷 아웃, HTML 순서의 텍스트가되어야합니다.

그러면 페이지 하단에 고정 된 div가 표시되고 아래로 스크롤하면 하단에 고정

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

div를 다른 div에 넣고 부모 div의 스타일을 position:relative;다음으로 설정하십시오. 자식 div에서 다음 CSS 속성을 설정하십시오.position:absolute; bottom:0;

텍스트의 맨 아래 줄만 블록의 측면으로 가면 괜찮습니다 (블록을 ​​끝내거나 새 블록을 시작하지 않고는 할 수 없습니다). 부모 블록의 하단 모서리 중 하나에 블록을 띄울 수는 없습니다. 블록 내의 단락 태그에 일부 내용을 넣고 블록의 오른쪽 하단 모서리에 대한 링크를 플로팅하려면 단락 블록 내에 링크를 넣고 부동으로 설정하십시오. : 둘 다 단락 태그의 끝 바로 아래에 설정됩니다. 마지막 div는 부모 태그가 부동 태그를 둘러싸도록하는 것입니다.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

부모 요소를 position : relative로 설정하면 자식을 맨 아래 설정 위치로 설정할 수 있습니다. 바닥 : 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

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

텍스트를 멋지게 감싸고 싶다면 :-

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

나는이 물건이 오래되었다는 것을 알고 있지만 최근 에이 문제에 부딪쳤다.

절대 위치 div를 사용하면 조언이 실제로 바보입니다.

이제 보편적 인 솔루션을 찾지 못했지만 많은 경우에 부동 div를 사용하여 일련의 span 요소와 같이 연속으로 무언가를 표시합니다. 수직으로 정렬 할 수 없습니다.

비슷한 효과를 얻으려면 다음과 같이하십시오 : div를 부동으로 만들지 말고 display 속성을로 설정하십시오 inline-block. 그런 다음 세로로 정렬 할 수는 있지만 마음에 드는 것입니다. 그냥 세트 부모의 DIV 속성에 필요 vertical-align하나에 top, bottom, middle또는baseline

누군가를 도울 수 있기를 바랍니다

Flexbox 가 도입되면서 많은 해킹 없이도 매우 쉬워졌습니다. align-self: flex-end자식 요소에서 가로 축을 따라 정렬합니다 .

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

산출:

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

나는이 솔루션을 오랫동안 찾았습니다. 이것이 내가 얻는 것입니다 :

자기 정렬 : 플렉스 엔드;

링크 : https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 그러나, 나는이 링크를 열었던 곳을 기억할 수 없습니다. 그것이 도움이되기를 바랍니다.

나는 단지 테이블을 할 것입니다.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

그리고 CSS :

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

실제로 확인하십시오 :
http://jsfiddle.net/mLphM/1/

나는이 기술 중 몇 가지를 시도했지만 다음이 나를 위해 일했다. 그래서 다른 모든 것이 실패하면 그것이 나를 위해 일했기 때문에 이것을 시도하십시오 :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

A는 @ dave-kok의이 접근법을 선택했습니다. 그러나 전체 내용이 스크롤하지 않고 적합한 경우에만 작동합니다. 누군가 개선 할 수 있으면 고맙습니다

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

다음은 코드 http://jsfiddle.net/d9t9joh2/입니다.

이것은 이제 플렉스 박스로 가능합니다. 부모 div의 'display'를 'flex'로 설정하고 'margin-top'속성을 'auto'로 설정하십시오. 이것은 div의 속성을 왜곡하지 않습니다.

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

확실하지 않지만, 이전에 게시 된 시나리오는 자식 div에서 절대 위치 대신 위치 : 상대 를 사용하면 작동하는 것 같습니다 .

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

그리고 테이블이 없습니다 ...!

상대 정렬이 필요하고 DIV가 여전히 원하는 것을 제공하지 않으면 테이블을 사용하고 내용을 아래쪽에 정렬하려는 셀에서 valign = "bottom"을 설정하십시오. DIV가 테이블을 대체해야하기 때문에 귀하의 질문에 대한 훌륭한 답변이 아니라는 것을 알고 있지만 이것이 최근에 이미지 캡션으로해야했던 일이며 지금까지 완벽하게 작동했습니다.

이 시나리오는 이전에 게시했습니다.

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

절대 위치는 페이지를로드 할 때 div를 브라우저의 가장 낮은 부분으로 고정하지만 페이지가 길면 아래로 스크롤하면 스크롤하지 않습니다. 나는 위치를 상대적으로 바꾸었고 완벽하게 작동합니다. div는로드시 바로 바닥으로 이동하므로 바닥에 도달 할 때까지 실제로 볼 수 없습니다.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

흥미로운 접근법 중 하나는 두 개의 오른쪽 플로트 요소를 서로 쌓아 올리는 것입니다.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

단지 문제는 상자의 높이를 알고있을 때만 작동한다는 것입니다.

Stu의 대답은 지금까지 가장 가까운 작업이지만 텍스트가 줄 바꿈되는 방식에 따라 외부 div의 높이가 변경 될 수 있다는 사실을 여전히 고려하지는 않습니다. 따라서 "파이프"의 높이를 변경하여 내부 div를 한 번만 재배치하는 것만으로는 충분하지 않습니다. 이러한 변경은 루프 내부에서 발생해야하므로 올바른 위치에 도달했는지 지속적으로 확인하고 필요한 경우 다시 조정할 수 있습니다.

이전 답변의 CSS는 여전히 완벽하게 유효합니다.

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

그러나 Javascript는 다음과 같습니다.

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

나는 그것이 매우 오래된 스레드라는 것을 알고 있지만 여전히 대답하고 싶습니다. 누군가 아래 CSS 및 HTML을 따르는 경우 작동합니다. 자식 바닥 글 div는 접착제처럼 바닥에 달라 붙습니다.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

margin-top바닥 글을 컨테이너 바닥에 설정 하기 위해 CSS 속성 을 사용 합니다. 그리고 css text-align-last속성을 사용하여 바닥 글 내용을 중앙에 설정하십시오.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

아, 젊은이들 .... 여기 있습니다 :

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

절대 위치가 없습니다! 반응! 오래된 학교

꽤 오래된 질문이지만 여전히 ... div를 다음과 같이 페이지 하단에 띄울 수 있습니다.

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

마법이 어디서 발생하는지 볼 수 있습니다. 부모 div의 맨 아래에 부동으로 똑같이 할 수 있다고 생각합니다.

간단하게 ... html 파일에서 오른쪽으로 .... 바닥에 "바닥 글"(또는 아래쪽에 원하는 div)이 있습니다. 그래서 이것을하지 마십시오 :

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

이 작업을 수행하십시오. (바닥 글을 아래에 두십시오.)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

이 작업을 수행 한 후 CSS 파일로 이동하여 "사이드 바"를 왼쪽으로 띄울 수 있습니다. 그런 다음 "content"를 오른쪽으로 띄우고 "footer"를 모두 지 웁니다.

그것은 나를 위해 일했다.

position:absolute; bottom:0;CSS 내 div ID 에 추가하여 첫 번째 시도 에서이 작업을 수행했습니다 . 부모 스타일을 추가하지 않았습니다 position:relative;.

Firefox와 IE 8 모두에서 완벽하게 작동하지만 IE 7에서는 아직 시도하지 않았습니다.

다른 대답은 테이블과 행 범위를 신중하게 사용하는 것입니다. 선행 행의 모든 ​​표 셀 (주 내용을 제외하고)을 rowspan = "2"로 설정하면 주 표 셀의 맨 아래에 항상 valign = "bottom"을 넣을 수있는 하나의 셀 구멍이 생깁니다.

높이를 한 줄에 필요한 최소값으로 설정할 수도 있습니다. 따라서 나머지 텍스트가 차지하는 공간에 관계없이 항상 가장 좋아하는 텍스트 줄을 맨 아래에 표시합니다.

모든 div 답변을 시도했지만 필요한 것을 수행 할 수 없었습니다.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

여기 내 해결책이 있습니다.

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

너비가 1px 인 빈 요소를 사용하여 플로팅 할 수 있습니다. 그런 다음 실제로 배치하려는 요소를 지우고 빈 요소의 높이를 사용하여 얼마나 멀리 떨어져 있는지 제어하십시오.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}