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>