将文本与底部对齐，并应用外部形状

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，减去文本的高度并将结果作为顶部填充。但是，这留下了一个空白，因为现在文本进一步向下，它的高度更小，计算有点偏差。所以，我所做的（必须有一个更好的解决方案）是计算它三次。看看吧：

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>