Question

我有一些文字，我用外形包装。我如何将其与底部对齐？

在父级上使用flexbox会破坏浮动，因此不再包装。使用绝对定位只会忽略形状。

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

＆＃13;

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";

＆＃13;

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%); 
}

＆＃13;

<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>

＆＃13;

将文本与底部对齐并应用shape-outside？

1 个答案: