텍스트를 모양 바깥쪽에 맞 춥니 다.

Question

모양이 바깥 쪽을 사용하여 몇 줄로 감싼 텍스트가 있습니다. 어떻게 하단에 정렬합니까?

부모의 플렉스 박스를 사용하면 플로트가 파괴되어 더 이상 랩핑되지 않습니다. 절대 위치 지정을 사용하면 모양이 무시됩니다.

main { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: dotted 1px lightgray; 
 
} 
 

 
div { 
 
    width: 100%; 
 
    height: 100%; 
 
    float: left; 
 
    shape-outside: polygon(0 0, 50% 0, 0 100%); 
 
}

<main> 
 
    <div></div> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Vestibulum viverra est quis fermentum pulvinar. Morbi feugiat pretium massa, id accumsan lacus tempus nec.</span> 
 
</main>

Answer 1

당신은 외부 요소의 offsetHeight을 얻을 텍스트의 높이를 빼고 최고 패딩 등의 결과를 넣을 수 있습니다. 그러나 텍스트가 더 아래로 내려 갔기 때문에 더 작은 높이가 있고 계산이 약간 벗어나기 때문에 간격이 생깁니다. 그래서, 내가 한 것은 (더 나은 sollution이 있어야합니다) 그것을 세 번 계산하는 것이 었습니다. 그것을 체크 아웃 :

var mainHeight = document.getElementById('main').offsetHeight; 
 

 
var oldHeight = document.getElementById('insider').offsetHeight; 
 
var padding = (mainHeight-oldHeight); 
 
document.getElementById("text").style.padding = padding+"px 0 0 0"; 
 

 
//Two more times to fix the gap 
 

 
oldHeight = document.getElementById('insider').offsetHeight; 
 
padding = (mainHeight-oldHeight); 
 
document.getElementById("text").style.padding = padding+"px 0 0 0"; 
 

 
oldHeight = document.getElementById('insider').offsetHeight; 
 
padding = (mainHeight-oldHeight); 
 
document.getElementById("text").style.padding = padding+"px 0 0 0";

main { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: dotted 1px lightgray; 
 
    background-color:wheat; 
 
} 
 

 
main div.empty { 
 
    width: 100%; 
 
    height: 100%; 
 
    float: left; 
 
    shape-outside: polygon(0 0, 50% 0, 0 100%); 
 
}

<main id="main"> 
 
    <div class="empty"></div> 
 
    <div class="text" id="text"><span id="insider">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed mattis odio. Lorem ipsum dolor sit.</span></div> 
 
</main>