디브를 용기 바닥에 띄우려면 어떻게 해야 합니까?
는 했습니다를 맨 했습니다.float:right(또는left 합니다.,요divr의 div께를 사용할 수 있습니다.float(위와 왼쪽으로만 래핑된 텍스트).
저는 했습니다.floatbottom는 여러 을 할 수 웹 을 사용하는 것 외에 못했지만 value다.
나는 이것이 아주 흔한 디자인이 될 것이라고 생각했지만, 분명히 그렇지 않습니다.을 하지 않는다면, 는 제 해야 할 div수작업으로 하지만 그것은 다소 불안정하며 필요한 모든 페이지에서 그것을 해야만 하는 것은 싫습니다.
상위 디바를 다음으로 설정합니다.position: relative엔 내면의 , 는...
position: absolute;
bottom: 0;
...그러면 끝입니다 :)
작동시키는 방법은 다음과 같습니다.
- 요소를 정상처럼 왼쪽으로 띄웁니다.
다음을 사용하여 부모 디브를 180도 회전합니다.
-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);이제 왼쪽으로 떠 있는 모든 요소를 180도 회전시켜(클래스를 제공) 다시 똑바로 합니다.부일라! 바닥에 떠있어요.
며칠 동안 여러 가지 기술로 고심한 끝에 저는 이것이 불가능해 보인다고 말해야 합니다.javascript를 사용해도 (하기 싫은) 불가능해 보입니다.
이해하지 못했을 수도 있는 사람들을 위해 명확하게 설명하자면, 이것이 제가 찾고 있는 것입니다. 출판할 때 삽입물(그림, 표, 그림 등)을 배치하는 것은 꽤 일반적입니다.)의 하단은 삽입물을 중심으로 텍스트가 자연스럽게 흐르는 블록(또는 페이지)의 텍스트 마지막 줄 하단과 정렬되며, 삽입물이 페이지의 어느 쪽에 있는지에 따라 오른쪽 또는 왼쪽으로 텍스트가 흐릅니다.html/css에서 float style을 사용하여 삽입물 상단을 블록 상단으로 정렬하는 것은 사소한 일이지만 놀랍게도 일반적인 레이아웃 작업임에도 불구하고 텍스트 하단과 삽입물을 정렬하는 것은 불가능해 보입니다.
누가 마지막 제안을 하지 않는 한 이 아이템의 디자인 목표를 다시 살펴봐야 할 것 같습니다.
저는 JQuery에서 플로트 오른쪽 위에 영폭 스트럿 요소를 배치한 후 부모 키에서 플로팅 아이 키를 뺀 스트럿(또는 파이프) 크기를 조정하여 이를 달성했습니다.
js가 시작되기 전에 나는 작동하지만 텍스트 흐름을 뒤로 허용하는 위치 절대 접근 방식을 사용하고 있습니다.따라서 스트럿 접근을 가능하게 하기 위해 정적 위치로 전환합니다.(header은 모체, 컷아웃은 오른쪽 하단에 원하는 것, 파이프는 나의 스트럿)
$("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
}
파이프는 먼저 오려낸 다음 HTML 순서의 텍스트가 와야 합니다.
이렇게 하면 페이지 하단에 고정 디바가 있고 아래로 스크롤할 때 하단에 고정됩니다.
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
을 div 를 div div로 합니다.position:relative;음 합니다 position:absolute; bottom:0;
상위 요소를 position:relative로 설정하면 하위 설정 위치:absolute; 및 bottom: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>
텍스트의 가장 아래쪽에 있는 줄만 블록의 측면으로 이동해도 괜찮으면(블록을 끝내고 새로 시작하지 않으면 할 수 없는 완전한 주변과 아래에 있는 것과 반대로) 블록을 부모 블록의 아래쪽에 있는 모서리 중 하나로 이동하는 것이 불가능하지 않습니다.블록 내의 단락 태그에 일부 내용을 넣고 블록의 오른쪽 하단 모서리에 링크를 띄우려면, 단락 블록 내에 링크를 넣고 띄우도록 설정합니다: 오른쪽, 그리고 둘 다 단락 태그의 끝 바로 아래에 설정된 clear가 있는 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>
플렉스박스가 도입되면서 해킹을 많이 하지 않아도 이 작업이 매우 쉬워졌습니다.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>저도 이 해결책을 오랫동안 찾고 있었습니다.이것이 제가 얻은 결과입니다.
align-self: 플렉스-엔드;
link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 하지만 어디서 이 링크를 열었는지 기억이 나지 않습니다.도움이 되길 바랍니다.
텍스트를 잘 래핑하려면:-
.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>플렉스 박스로 가능합니다.부모 디바의 '디스플레이'를 'flex'로 설정하고 'margin-top' 속성을 'auto'로 설정하면 됩니다.이것은 디브 둘 다의 속성을 왜곡하지 않습니다.
.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>이 물건이 오래된 것은 알지만, 최근에 이 문제에 부딪혔습니다.
절대 포지션 디브들의 조언을 사용하는 것은 정말 어리석은 일입니다. 왜냐하면 모든 플로트는 절대 포지션과 함께 실점을 하기 때문입니다.
보편적인 해결책을 찾지는 못했지만, 많은 경우에 프로플들은 일련의 스팬 요소와 같은 것을 일렬로 표시하기 위해 플로팅 디브를 사용합니다. 그리고 그것을 수직으로 정렬할 수 없습니다.
와 유사한 inline-block할 수 . 에 드셔도 됩니다 그러면 마음에 드는 대로 수직으로 정렬할 수 있습니다.부모님의 디브 속성을 설정하기만 하면 됩니다.vertical-align 쪽이든top,bottom,middle아니면baseline
나는 그것이 누군가에게 도움이 되기를 바랍니다.
한 가지 흥미로운 접근법은 두 개의 오른쪽 플로팅 요소를 서로 위에 쌓는 것입니다.
<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>
유일한 문제는 박스의 높이를 알 때만 작동한다는 것입니다.
저는 그냥 테이블을 할 겁니다.
<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;
}
실제로 보기:
://
저는 이 방법들 중 몇 가지를 시도해 보았는데, 다음 방법들이 저에게 효과가 있었습니다. 다른 방법들이 모두 실패한다면 저에게 효과가 있었기 때문에 이것을 시도해 보세요 :).
<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/ 입니다.
확실하지는 않지만, 만약 당신이 포지션을 사용한다면, 이전에 게시된 시나리오는 효과가 있는 것처럼 보였습니다: 차일드 디브에 절대적인 것이 아니라 상대적인 것.
#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>
테이블도 없어요!
margin-top컨테이너 바닥에 바닥을 설치하기 위한 목적의 소유물.고 CSS하는것을 것.text-align-last바닥글 내용을 중심에 설정할 속성입니다.
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
부동 위치와 절대 위치의 조합이 저에게 효과가 있습니다.메시지의 발송 시간을 말풍선의 오른쪽 하단 모서리에 배치하려고 했습니다.시간이 메시지 본문과 겹쳐서는 안 되며 꼭 필요한 경우가 아니면 거품을 부풀리지 않습니다.
솔루션은 다음과 같이 작동합니다.
- 동일한 텍스트를 가진 두 개의 스팬이 있습니다.
- 하나는 떠 있지만 보이지 않습니다.
- 다른 하나는 절대적으로 모서리에 위치합니다.
눈에 보이지 않는 것의 목적은 눈에 보이는 것을 위한 공간을 확보하는 것입니다.
.speech-bubble {
font-size: 16px;
max-width: 240px;
margin: 10px;
display: inline-block;
background-color: #ccc;
border-radius: 5px;
padding: 5px;
position: relative;
}
.inline-time {
float: right;
padding-left: 10px;
color: red;
}
.giant-text {
font-size: 36px;
}
.tremendous-giant-text {
font-size: 72px;
}
.absolute-time {
position: absolute;
color: green;
right: 5px;
bottom: 5px;
}
.hidden {
visibility: hidden;
}<ul>
<li>
<span class='speech-bubble'>
This text is supposed to wrap the time <span> which always seats at the corner of this bubble.
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float.
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Easy, uh?
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Well, not <span class='giant-text'>THAT</span>
easy
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
The problem is, we can't tell the span to float to right AND bottom...
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go.
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Make the floated span invisible.
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time hidden'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
The giant text here is to simulate images which are common in a typical chat app.
<span class='tremendous-giant-text'>Done!</span>
<span class='inline-time hidden'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
</ul>올바른 솔루션은 다음과 같습니다.
.toBottomRight
{
display:inline-block;
position:fixed;
left:100%;
top:100%;
transform: translate(-100%, -100%);
white-space:nowrap;
background:red;
}
<div class="toBottomRight">Bottom-Right</div>
jsfiddle: https://jsfiddle.net/NickU/2k85qzxv/9/
현재는 이것이 불가능합니다.하단 가장자리에 맞춰 콘텐츠를 조정하는 방법에는 여러 가지가 있습니다(유연성, 그리드, 테이블, 절대성).그러나 이러한 접근 방식은 유동성을 존중하지 않으므로 콘텐츠가 이러한 요소를 중심으로 흐르지 않습니다.
언젠가 브라우저와 cswg가 정의에 동의한다면 cs로 플로팅 요소가 가능할 수 있습니다.
고급 리소스:
https://drafts.csswg.org/css-page-floats/ #float-
https://github.com/w3c/csswg-drafts/issues/1251
상대적인 정렬이 필요한데도 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;
}
스투의 대답은 지금까지 작업한 것에 가장 근접하지만, 텍스트를 안에 감는 방식에 따라 당신의 외부 디브의 키가 변할 수 있다는 사실을 여전히 고려하지 않습니다.따라서 ("파이프"의 높이를 변경하여) 내부 디브의 위치를 한 번만 변경하는 것으로는 충분하지 않을 것입니다.이러한 변화는 루프 내부에서 일어나므로 올바른 위치 설정을 아직 달성했는지 여부를 지속적으로 확인하고 필요한 경우 재조정할 수 있습니다.
이전 답변에서 나온 CSS는 여전히 완벽하게 유효합니다.
#outer {
position: relative;
}
#inner {
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
.pipe {
width:0px;
float:right
}
그러나 자바스크립트는 다음과 같이 보여야 합니다.
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을 따르는 사람이 있으면 작동합니다.어린이 족구 디바는 바닥이 풀처럼 붙어있을 것입니다.
<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>
비록 이것은 매우 복잡하지만 가능합니다.최신 파이어폭스와 구글 크롬 브라우저에서 이 코드를 확인했습니다.에서 CSS다를 수 .shape-outside소유물.자세한 내용은 이 참조를 참조하십시오.
window.addEventListener('load', function() {
var imageHolder = document.querySelector('.image-holder');
var containerHeight = document.querySelector('.container').offsetHeight;
var imageHolderHeight = imageHolder.offsetHeight;
var countPadding = containerHeight - imageHolderHeight;
imageHolder.style.paddingTop = countPadding + 'px';
containerHeight = document.querySelector('.container').offsetHeight;
var x1 = '0' + 'px ' + countPadding + 'px';
var x2 = imageHolder.offsetWidth + 'px' + ' ' + countPadding + 'px';
var x3 = imageHolder.offsetWidth + 'px' + ' ' + containerHeight + 'px';
var x4 = 0 + 'px' + ' ' + containerHeight + 'px';
var value = 'polygon(' + x1 + ',' + x2 + ',' + x3 + ',' + x4 + ')';
imageHolder.style.shapeOutside = value;
});.container {
width: 300px;
text-align: justify;
border: 1px solid black;
}
.image-holder {
float: right;
}<div class='container' style="">
<div class='image-holder' style=''>
<img class='bottom-right' style="width: 100px;" src="https://www.lwb.org.au/services/child-youth-and-family/static/b5cca79df7320248a77f6655a278190f/a6c62/img-index-banner.jpg" alt="">
</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quasi ut ipsam saepe, dignissimos, accusamus debitis ratione neque doloribus quis exercitationem iure! Harum quisquam ipsam velit distinctio tempora repudiandae eveniet.</div>
</div>일부 자바스크립트를 사용하여 컨테이너 바닥에 띄운 요소를 고정할 수 있었습니다. 그리고 여전히 텍스트에 띄우고 있는데, 이것은 외부 모양과 같은 것에 매우 유용합니다.
플로팅된 요소는 컨테이너와 동일한 마진-탑(margin-top)이 할당되며, 이는 자신의 높이가 차감됩니다.이렇게 하면 플로트가 보존되고 요소를 컨테이너의 하단 가장자리로 밀어 넣으며 요소 아래로 텍스트가 흘러가는 것을 방지할 수 있습니다.
const resizeObserver = new ResizeObserver(entries => {
if(entries.length == 0) return;
const entry = entries[0];
if(!entry.contentRect) return;
const containerHeight = entry.contentRect.height;
const imgHeight = imgElem.height;
const imgOffset = containerHeight - imgHeight;
imgElem.style.marginTop = imgOffset + 'px';
});
const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);
작동 예: https://codepen.io/strarsis/pen/QWGXGVy
RizeObserver와 자바스크립트에 대한 광범위한 지원 덕분에 이는 매우 신뢰할 수 있는 솔루션이 될 것으로 보입니다.
이 CSS+자바스크립트 솔루션을 사용해보세요.맨 위 오른쪽 플로팅 디브부터 시작합니다.그런 다음 오른쪽 가장자리를 따라 0폭 디브의 높이를 계산하여 부동 디브를 아래로 밀어 넣습니다.이 코드는 적절한 높이를 얻기 위해 약간의 수정이 필요할 수 있습니다.
<style>
#mainbox {border:4px solid red;width:500px;padding:10px;}
.rightpad {float:right;clear:right;padding:0;width:0;}
#floater {background-color:red;text-align:center;color:#FFF;width:300px;height:100px;float:right;margin-right:-10px;margin-top:10px;}
</style>
<script>
window.onload = function() {
var mmheight = document.getElementById("mainbox").clientHeight;
var ff = document.getElementById("floater");
var ffheight = ff.clientHeight;
var dd = document.createElement('div');
dd.className = "rightpad";
dd.style.height = (mmheight - ffheight - 20) * 1 + "px";
ff.parentNode.insertBefore(dd,ff);
}
</script>
<div id="mainbox">
<div id="floater" class="rightpad">123</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere tellus et dolor vestibulum gravida. Donec vel nunc massa. Quisque quis varius libero. Fusce ut elementum magna. Praesent hendrerit diam sed velit rutrum mollis. Nunc pretium metus in tempus tempus. Quisque laoreet nibh eget volutpat dictum. Pellentesque libero ipsum, tristique et aliquam aliquam, accumsan sed sem. Phasellus facilisis sem eget mi tempus rhoncus.</p></div>
꽤 오래된 질문이지만 그래도...다음과 같이 div를 페이지 하단에 띄울 수 있습니다.
div{
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
마법이 어디서 일어나는지 볼 수 있습니다.당신도 부모님의 디브 밑으로 흘려보내는 것에 대해 그렇게 할 수 있을 것 같습니다.
언급URL : https://stackoverflow.com/questions/311990/how-do-i-get-a-div-to-float-to-the-bottom-of-its-container
'itsource' 카테고리의 다른 글
| Sequel Pro?(GUI 기반 sql navigator)를 대체하는 Linux (0) | 2023.10.09 |
|---|---|
| 사이프러스를 사용하여 드롭다운 목록 항목 선택 (0) | 2023.10.09 |
| Oracle Streams와 Change Data Capture의 차이점은 무엇입니까? (0) | 2023.10.09 |
| SQL Server Compact에 대한 제한 사항은 무엇입니까? (또는 MS 플랫폼에서 사용할 데이터베이스를 어떻게 선택합니까?) (0) | 2023.10.09 |
| 배열 요소가 존재하는지 확인하려면 어떻게 해야 합니까? (0) | 2023.10.09 |