div의 오른쪽 하단 모서리에 div 입력

div의 오른쪽 하단에 요소를 떠 다니는 솔루션을 찾는 데 많은 어려움을 겪고 있습니다.div의 오른쪽 하단 모서리에 div 입력

동적으로 정렬됩니다 (div와 버튼 모두). 버튼 주위를 감쌀 수있는 텍스트가 필요하고 div의 오른쪽 하단 모서리에 고정하는 버튼이 필요합니다.

이 기능을 사용하려면 순수한 CSS 또는 일부 자바 스크립트가 있어야합니다. 기본적

<div class='container'> <p class='text-left'>Dynamic text area</p> <a class='btn'>Click Here!</a> </div>

I는 .btn 오른쪽 부유 착석 할 (동적, 폭 110px로 설정된 그것의 텍스트의 1-3 라인 일 수있다)을 필요

아래쪽 및 단추 주위를 둘러 쌀 텍스트 (창 밖으로 절대/고정 된 위치 지정을 내 보냅니다).

이것은 중복으로 표시되었지만 모두이 고정 된 높이를 가정하므로이 문제를 특별히 해결하는 답변이 없습니다.

출처

2016-08-22 Shane Lessard

당신이 코드 예제가 있습니까 이동? –

하위 요소를 아래로 밀어 내리는 부동 요소를 만들어야합니다. 그런 다음 Javascript를 사용하여 푸셔 요소의 높이를 계산합니다. 푸셔와 자식 컨테이너는 텍스트보다 먼저 선언되어야하므로 컨테이너의 "첫 번째 문자"로 렌더링됩니다. 여기

var parents = document.getElementsByClassName("parent"); 
 
for (var i = 0; i < parents.length; i++) { 
 
    var parent = parents[i]; 
 
    var child = parent.getElementsByClassName("child")[0]; 
 
    var filler = parent.getElementsByClassName("filler")[0]; 
 
    var parenth = parent.offsetHeight; 
 
    var childh = child.offsetHeight; 
 
    filler.style.height = (parenth-childh) + "px"; 
 
}

.parent { 
 
    background-color: grey; 
 
} 
 
.child { 
 
    float: right; 
 
    clear: right; 
 
    background-color: green; 
 
} 
 
.filler { 
 
    width: 0px; 
 
    float: right; 
 
}

<div class="parent"> 
 
    <div class="filler"></div> 
 
    <div class="child">thingy thingythingy<br><br>thingy thingy thingy<br>thingy thingy thingy</div> 
 
    asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd asd asdasd 
 
</div>

출처

2016-08-22 19:14:02

그리고 그 닌자 downvote? –

절대 위치 지정을 사용하면 div를 원하는 위치에 배치 할 수 있지만 텍스트를 요소 주위로 줄 수있는 float 효과는 없습니다. –

아, 포장지를 잊어 버렸습니다. 이것을 편집하겠습니다. –

기존 코드를 보지 않고도 매개 변수를 전혀 모르기 때문에 추측입니다.

추가 할 CSS가 해당 요소에 클래스 이름을 적용합니다.

출처

2016-08-22 19:13:32

이것은 흐름에서 버튼을 제거합니다. 즉, 불행히도 텍스트가 감싸지 않을 것입니다. –

-1

는 나중에

#foo { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    } 
 
#btnDiv{ 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset=utf-8 /> 
 
</head> 
 
<body> 
 
    <div id="foo"> 
 
     <button id="btnDiv">button</button> 
 
    </div> 
 
</body> 
 
</html>

출처

2016-08-22 19:15:44

div의 오른쪽 하단 모서리에 div 입력

답변

관련 문제