Question

我有以下代码将我的H1与DIV的底部对齐：

CSS：

h1wrap{
  position: relative;
  height: 80px;
  width: 358px;
}
h1{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
}

HTML：

<div class="h1wrap">
  <h1>title</h2>
</div>

这部分地完成了我想要的...如果在div的底部对齐标题的文本并将其与右对齐。但是在包装到下一行之前，不是H1尽可能多地填写第一行，我想先填写最后一行并继续工作......

所以像＃34这样的标题;这是一个非常长的标题＆＃34;现在将包装到：

THIS IS A VERY LONG
              TITLE

应该是这样的：

                THIS
IS A VERY LONG TITLE

我创建了这个包含上面代码的JsFiddle，并展示了我到目前为止的表现。 CSS解决方案将是完美的！

Answer 1

这是一个CSS解决方案，支持可能有限，因为我无法在http://caniuse.com/找到它，但它现在在IE中为我工作...

将此添加到H1： writing-mode: rl-bt

小提琴： http://jsfiddle.net/rd3vzq48/1/

价： https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Answer 2

据我所知，在没有更改标记的情况下，没有广泛支持的方法。如果你不能使用writing-mode: rl-bt，那么flex-box将是我的下一个想法，但你必须让每个单词成为它自己的元素。

可能不可行，但以防万一：Fiddle

标记：

<div class='h1wrap'>
  <h1><span>This</span> <span>Is</span> <span>A</span><span>Very</span> <span>Long</span> <span>Title</span></h1>
</div>

样式：

h1{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
}

h1 span {
  margin: 0 2px; /* otherwise you loose the space between words */
}

将H1与DIV的右下角对齐

2 个答案: